Scribd
Upload
600 views

HTML CSS Javascript Practice Questions HackerRank

Uploaded by

Shaurya Yamdagni
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
600 views

HTML CSS Javascript Practice Questions HackerRank

Uploaded by

Shaurya Yamdagni
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML/CSS/Javascript

Q1. 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.

Q2. Create a flexible grid with 1 row and 4 columns. The width of each column is 25% of the window
size. This percentage width must be maintained even if the page is resized. 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. 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.
Q3. Create a Phone Directory component as shown below:
The component should perform the following validations in the form:
 The name input field should pass following validations. In case of error, the `Invalid
Input!` message should be shown in <div id="error" data-testid="error"></div>.
 The field is required.
 It should contain only Alphabets and Space.
 It should be less than or equal to 20 characters in length.
 The mobile input field should pass following validations. In case of error, the `Invalid
Input!` message should be shown in <div id="error" data-testid="error"></div>.
 The field is required.
 It should contain only Numbers.
 It should be equal to 10 characters in length.
 The email input field should pass following validations. In case of error, the `Invalid
Input!` message should be shown in <div id="error" data-testid="error"></div>.
 The field is required.
 A valid email address should have the following rules:
 It should start with a letter and can contain combinations of only letters,
digits, and dots until it reaches the symbol @.
 It can have 2 to 10 characters before the symbol @.
 After the symbol @, it should contain 2 to 20 alphabetic characters before
encountering the dot symbol (.).
 After the (.) dot symbol, it should contain 2 to 10 alphabetic characters.
 Eg: john.doe3@gmail.com is a valid email address.
 If the submit button is clicked and any of the above-mentioned validations fail, show the alert
box <div id="error" data-testid="error"></div>.
 When the submit button is clicked and all the validations pass,
 Hide the alert error box if visible
 Reset the form data by clearing the inputs for the name, email, and mobile.
 Add the new contact to the table.
 The list of contacts in the table should be displayed in the order it is added.
 Note: In order to show/hide the alert error box, use the display: none and display:
block attribute only. The test cases rely on this fact.

The following data-test-id attributes are required in the component for the tests to pass:
 The name input: 'name'
 The email input: 'email'
 The mobile input: 'mobile'
 The submit button: 'submit'
 The div containing the error message: 'error'

You might also like