Project : Todo with CSS

yogeshtakeo commented 10 months ago

Task: Create a Todo List Application

Objective: Build a simple todo list application using React to manage tasks.

Task Overview

Set up a new React project using a tool of your choice (e.g., Vite, Create React App, etc.).
Implement the functionality to add, edit, and delete tasks in the todo list.
Style the application using native CSS or a CSS framework of your choice.

Task Details

Project Setup:
- Set up a new React project using a tool of your choice.
- Create a new component called TodoList to manage the todo list.
Render a List of Tasks:
- Create a state variable to store the list of tasks (an array of objects with properties like id, title, completed, etc.).
- Render the list of tasks in the TodoList component using JSX and the array's map method.
Add New Tasks:
- Create a form in the TodoList component to add new tasks.
- Implement an input field for entering task titles and a submit button.
- Handle the form submission event to add the new task to the list of tasks.
Edit Tasks:
- Implement functionality to edit tasks in the todo list.
- Add an edit button or an inline editing feature for each task.
- When the user clicks the edit button or triggers the inline editing, allow them to modify the task title.
- Update the corresponding task in the list of tasks when the editing is completed.
Delete Tasks:
- Implement functionality to delete tasks from the todo list.
- Add a delete button for each task in the list.
- Handle the delete button click event to remove the task from the list of tasks.
Style the Application:
- Apply styles to the todo list application using native CSS or a CSS framework of your choice.
- Design a clean and user-friendly interface for adding, editing, and deleting tasks.
- Make the application visually appealing and responsive.
Test and Refine:
- Start the development server and run the React project.
- Verify that tasks can be added, edited, and deleted successfully.
- Test different scenarios, such as adding multiple tasks, editing existing tasks, and deleting tasks, to ensure the functionality works as expected.

Task Submission

Take a screenshot of the web browser displaying the rendered React component . Share the screenshot Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repository.