Amazon - FEE II Online Assessment

Amazon - FEE II - Online Assessment

Level: FEE II
Education: Master
Years of Experience: 6
Questions Asked:

  1. Implement UI: Amazon Vendor Phone Directory

Implement with Vanilla JS,

There are a form with 3 inputs: Contact Name, Mobile Number, Email,
there is a button in the form: “Add vendor”

Below the form there is a table with title “Contact Summary”, with one line of hard coded row. Columns are: “Name”, “Mobile” and “Email”, corresponding to the form fields above.

  1. contact name field:
    it is required;
    it should contain only letters and spaces;
    it should be less than or equal to 20 chars in length
  2. mobile number field:
    it is required;
    it should contain only Numbers;
    it should be equal to 10 chars in length
  3. email field:
    it is required;
    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 chars before the symbol @
    After the symbol @, it should contain 2 to 20 alphabetic chars before encountering the dot symbol(.)
    After the (.) dot Symbol, it should contain 2 to 10 alphabetic chars
  4. When the submit button is clicked:
    Hide the alert or error component is visible
    Reset the form data by clearing the inputs for the name, email and mobile phone
    add the new contact to the table below
    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.

Validation:
If the submit button is clicked and any of the field requirements are not met and the validations fail, show the error message component
<div id="error" data-testid="error"> invalid Input </div>

  1. Implement UI: Amazon book library Accordion

There are accordion text place holders in the HTML, you are required to implement the JS part

Requirements:

  1. By default accordion items are expanded
  2. Clicking on the accordion title will toggle open/close status of the accordion, and the content will show/hide accordingly.
  3. The collapsed/expanded icon in the accordion title should change correctly on opening/closing the accordion.
  4. If the multiselect checkbox is not checked, there can only be one expanded item in the accordion
  5. If the multiselect checkbox is checked, there can be multiple expanded items in the accordion