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

Refer to the image below:

Design Files

Click to view

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Tasks View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Filter 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 list of tasks and Task input should be empty and the active option in the Tags select element should be the first item of the given tagsList.

• When non-empty values are provided for Tasks, Tags and the Add Task button is clicked,

  • A new task should be added to the list of tasks.
  • The value inside the Task input and Tag select elements should be updated to their initial values.

• When a single tag is clicked it should be changed to an active state and filtered tasks should be displayed accordingly.

• When no tag in the list of tags is active, then all the tasks should be displayed.

• The App component consists of the tagsList. It consists of a list of tag details objects with the following properties in each object.

  key	DataType
  optionId	String
  displayText	String

Important Note

Click to view

The following instruction is required for the tests to pass

• Use the uuid package to generate the unique id.

Colors

Hex: #131213

Hex: #f3aa4e

Hex: #f1f5f9

Hex: #64748b

Hex: #f8f8f8

Hex: #475569

Hex: #323f4b

Hex: #000000

Hex: #ffffff

Hex: #f1f5f9

Hex: #1a171d

Hex: #f8fafc

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.