ToDo_App_w-React ©️

💻 https://my-reactjs-todo-app.netlify.app/

Description

This project entails building an Interactive Single-Page Todo Application. Users can add new todos with a text input field and an "Add" button. The application saves todos to local storage and renders them upon page reload. It also allows users to edit existing todos using an "Edit" button, which triggers modal or inline editing functionality. Deletion of todos is facilitated by a "Delete" button with a confirmation prompt. Additionally, there's a "Clear All" button to delete all todos, also with a confirmation prompt. The application features a responsive design for optimal user experience across devices.

Outcome 🎦

Project Planning & Management

Epic User Story: Build an Interactive Single-Page Todo Application 🎖️

User Stories:

1️⃣ Add a new todo:

• 🥇 Implement a text input field for entering new todos.
• 🥈 Implement an "Add" button to add the new todo to the list.
• 🥉 Ensure that new todos are saved to local storage when added.
• Implement functionality to render todos from local storage upon page reload.

2️⃣ Edit existing todos:

• 🥇 Implement an "Edit" button for each todo item.
• 🥈 Implement a modal or inline editing functionality for todos.
• 🥉 Implement functionality to allow the user to change the name of a todo using the edit button.
• 🥉 Ensure that edited todos are updated in local storage.

3️⃣ Delete existing todos:

• 🥇 Implement a "Delete" button for each todo item.
• 🥈 Implement a confirmation prompt before deleting a todo.
• 🥉 Ensure that deleted todos are removed from local storage.

4️⃣ Clear all todos:

• 🥇 Implement a "Clear All" button to delete all todos.
• 🥈 Implement a confirmation prompt before clearing all todos.
• 🥉 Ensure that all todos are cleared from local storage.

Additional Requirement: 💥

• The application should have a responsive design.

Project Skeleton 🩻

ToDo_App_w-React(folder)
|
├── public
│     ├── index.html
│     └── manifest.json
├── src
│    ├── assets
│    ├── components
│    │       ├── footer
│    │       │     ├── Footer.css
│    │       │     └── Footer.js
│    │       ├── header
│    │       │     ├── Header.css
│    │       │     └── Header.js
│    │       ├── task
│    │       │     ├── Task.css
│    │       │     └── Task.js
│    │       └── tasks
│    │               ├── Tasks.css
│    │               └── Tasks.js
│    ├── App.css
│    ├── App.js
│    ├── index.css
│    └── index.js
├── .gitignore
├── LICENSE
├── package.json
├── package-lock.json
├── readme.md
└── todo-react-app.gif

Objective

Build an sıngle-page application that allows us to create and organize to-do lists in an interactive way.

At the end of the project, following topics are to be covered; 🎯

• HTML

• CSS

• ReactJS

• React-Bootstrap

• Local Storage

At the end of the project, will be able to; 💪

• improve coding skills within HTML & CSS & JS & ReactJS & React-Bootstrap.

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

Contributing 🤝

Your insights and contributions greatly enrich my projects! Whether you're bursting with fresh project concepts or have ideas to enhance existing ones, your input is invaluable. Feel free to open an issue to initiate a dialogue about your thoughts, or submit a pull request with your proposed modifications. Every contribution plays a vital role in my growth and improvement, so thank you for being an integral part of my community!

LICENSE 🪪

This repository is licensed under the MIT License. See the LICENSE file for details. For more information please visit MIT License

☺ Happy Coding ✍