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:


Character Counter

Design Files

Click to view

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