Hackerrank With Answers

60 minutes

a

Question - 1

SCORE: 100 points

Calendar App

Javascript

CSS



Difficult

Make a calendar app. The calendar should display all the dates for the current month. The calendar app should also be able to mark appointments. The app must have the following functionality: Any appointment can be made for the current day or for a future date. No two appointments should overlap. If an appointment already exists for a day, a warning should be shown. Appointments can be edited and deleted.

Question - 2

SCORE: 100 points

Note-taking App

Javascript

CSS



Difficult

Create a simple note-taking app. You should be able to: Add a note Edit a note Delete a note Also make sure that: Each note should look like a colored rectangular box. Boxes can be colored in different colors, selected from a fixed list of colors.

Question - 3

SCORE: 75 points

Enhanced Flexible Grid Medium



Role Specific



Front-End



Javascript



CSS

You need to create a 1x4 flexible grid, that is, there is 1 row and 4 columns. The width of each column is 25% of the window size. This width must be maintained even if the page is resized. Also make sure that each cell of the grid can contain another 1x4 flexible grid. The border of the grid must be 1px black. Perform the following operations based on the value of window size: If the window size is less than 720px, then the 1x4 flexible grid becomes a 2x2 grid, that is, the 3rd and 4th columns slide down onto the 2nd row. If the window size is less than 360px, then the 1x4 flexible grid becomes 4x1 grid, that is, each column slides under the one before it. The 2nd column slides under the 1st, the 3rd slides under the 2nd, and the 4th slides under the 3rd.

Question - 4

SCORE: 50 points

List Insertion Visualization Easy



Role Specific



Front-End



Javascript



CSS

Create a visual model for explaining list insertion. The model must consist of three elements: List display section: The section on the page where the list will be displayed. Text field: A field to provide input for inserting a new element into the list. Button (named "Insert"): Clicking this button inserts a new element at the end of the existing list using the value provided in the text field. Two more requirements: No element should be inserted if the text field is empty when the user clicks the button. Every third element in the list must be displayed in red and the remaining elements in black.

Question - 5

SCORE: 50 points

To-Do-List Mark Easy



Design

Books on personal productivity emphasize the importance of using a To-Do-List. This list helps you organize your daily tasks and monitor your performance over time. Your task is to make it available online. You are provided with some code stubs which implement a limited functionality for this app. Modify the code to enable the following operation: Mark an item as complete. You can store the data in Javascript objects or in local storage. Please Note: This question is graded manually by a tech manager. So you can be as creative as you want to be. You can test your code by pressing the "Render" button below. You can use any library/framework to create this. You are free to design the UX of your choice.

Question - 6 To-Do-List Delete easy



design

A To-Do List is part of the tools kit of any organized modern individual. Lists help organize daily tasks and monitor performance over time. Your task is to make on online To-Do List. You are provided with some code stubs which implement

SCORE: 50 points

a limited functionality for this app. Modify the code to enable the following operation: Delete an item from the list. You can store the data in Javascript objects or in local storage. Please Note: This question is graded manually by a tech manager. So you can be as creative as you want to be. You can test your code by pressing the "Render" button below. You can use any library/framework to create this. You are free to design the UX of your choice.

Question - 7 Snake Game HTML5



Difficult

Develop an HTML5 Snake Game with the below specifications: Snake can be controlled by arrows. Snake food will be placed randomly on screen. Snake food has a random timeout between 4 to 10 seconds Snake elongates itself after eating the food. Every food intake gives 1 point. If the snake hits a boundary, the size of the game area should reduce by 113px and the direction of the snake reverses. Game is over when snake gets in contact with itself. Dimensions of food should be equal to dimension of one segment of the snake. Dimension of food should be 16px X 16px. The game area should be of size 800px X 800px. "Play Again" button should appear once the game is over. In the subsequent gameplays, if the score is greater than the previous gameplay score, then change the color of the score. To get bonus points in this question, implement a special food with the following properties: Special food intake fetches you 9 points and elongates the snake's length by 2 units. It can be of any shape other than a square. It must fit inside 28px X 28px box It is of a random color. Its timeout interval lies between 1 and 5 seconds. Game View:

SCORE: 100 points

Please Note: This question is graded manually by a tech manager. So you can be as creative as you want to be. You can create any number of files in the folders. You can test your code by pressing the "Render" button below. You can use any library/framework to create this. You are free to design the UX of your choice.