The goal of this coding exam is to quickly get you off the ground with Lists and Keys in React JS.

Refer to the image below:

Design Files

Click to view

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No User Inputs View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• Initially, the value of the user input element should be empty and No User Inputs View should be displayed.
• When a non-empty value is provided in the user input element and the Add button is clicked,
  • A new user input item should be added to the list of user inputs.
  • The count of characters of the value provided in the user input element should be displayed.
  • The value inside the user input element should be updated to its initial value.

Important Note

Click to view

The following instruction is required for the tests to pass

• Use the uuid package to generate the unique id.

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/no-user-inputs-img.png alt should be no user inputs

Colors

Hex: #ffc533

Hex: #334155

Hex: #0f172a

Hex: #ffbf1f

Hex: #272c47

Hex: #ffffff

Hex: #475569

Hex: #1e293b

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code