https://github.com/srikanth-kandi/react-my-tasks

My Tasks using ReactJS ⚛️
https://github.com/srikanth-kandi/react-my-tasks

Last synced: 9 days ago
JSON representation

My Tasks using ReactJS ⚛️

• Host: GitHub
• URL: https://github.com/srikanth-kandi/react-my-tasks
• Owner: srikanth-kandi
• Created: 2024-01-02T07:55:20.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-02T10:09:02.000Z (10 months ago)
• Last Synced: 2024-10-07T06:42:23.752Z (30 days ago)
• Language: JavaScript
• Homepage: https://srikanth-kandi.github.io/react-my-tasks/
• Size: 546 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# My Tasks using ReactJS ⚛️

Live demo - [https://srikanth-kandi.github.io/react-my-tasks/](https://srikanth-kandi.github.io/react-my-tasks/)

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

### Refer to the Video below:




https://github.com/srikanth-kandi/react-my-tasks/assets/87417638/06c22005-d74a-4858-bfef-cdde1454c3ad



  

    

    

  






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

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