/My-Tasks

https://DivyaMyTasks.ccbp.tech

Primary LanguageJavaScript

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

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.