https://github.com/balakrish001/my-tasks-reactjs

https://github.com/balakrish001/my-tasks-reactjs

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/balakrish001/my-tasks-reactjs
• Owner: Balakrish001
• Created: 2024-09-17T15:54:57.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T15:59:08.000Z (4 months ago)
• Last Synced: 2024-11-13T11:41:06.749Z (3 months ago)
• Language: JavaScript
• Size: 183 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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](https://assets.ccbp.in/frontend/content/react-js/my-tasks-output-no-tasks-view.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/my-tasks-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Filter View](https://assets.ccbp.in/frontend/content/react-js/my-tasks-output-filter-view.png)

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