Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhishekgurjar-in/todo-app
The Todo List application allows users to add, mark as completed, and remove tasks. It offers a clean interface for managing daily tasks. This project showcases how React can be used to manage the state of a simple yet dynamic application.
https://github.com/abhishekgurjar-in/todo-app
css javascript jsx react todo-app todo-list todo-list-app web-development
Last synced: 25 days ago
JSON representation
The Todo List application allows users to add, mark as completed, and remove tasks. It offers a clean interface for managing daily tasks. This project showcases how React can be used to manage the state of a simple yet dynamic application.
- Host: GitHub
- URL: https://github.com/abhishekgurjar-in/todo-app
- Owner: abhishekgurjar-in
- Created: 2024-09-10T13:59:03.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T05:44:58.000Z (about 2 months ago)
- Last Synced: 2024-10-11T23:04:42.968Z (25 days ago)
- Topics: css, javascript, jsx, react, todo-app, todo-list, todo-list-app, web-development
- Language: JavaScript
- Homepage: https://todo-list-web-in.netlify.app/
- Size: 137 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo List Website
## Introduction
In this tutorial, we'll build a **Todo List Web Application** using **React**. This project helps in understanding state management, event handling, and working with lists in React. It’s perfect for beginners looking to strengthen their skills in React development.
## Project Overview
The Todo List application allows users to add, mark as completed, and remove tasks. It offers a clean interface for managing daily tasks. This project showcases how React can be used to manage the state of a simple yet dynamic application.
## Features
- **Add New Task**: Users can add tasks to the list.
- **Mark as Completed**: Users can mark tasks as done.
- **Delete Task**: Users can delete tasks from the list.
- **Local Storage**: Persists tasks across page reloads using `localStorage`.
## Technologies Used
- **React**: For building the user interface and managing component state.
- **CSS**: For styling the application.
- **JavaScript**: For the core logic and functionality.
## Project Structure
The project structure follows a typical React project layout:
```
├── public
├── src
│ ├── components
│ │ ├── TodoList.jsx
│ │ ├── TodoItem.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
```
## Installation and Usage
To get started, clone the repository and install the dependencies:
```bash
git clone https://github.com/abhishekgurjar-in/todo_list.git
cd todo-list
npm install
npm start
```
The application will start running at `http://localhost:3000`.
## Live Demo
Check out the live demo of the Todo List [here](https://todo-list-web-in.netlify.app/).
## Screenshots
## Conclusion
The Todo List project is a great way to practice working with state, lists, and event handling in React. It demonstrates how to build a useful application that can persist data across sessions using `localStorage`.
## Credits
- **Inspiration**: Inspired by the need for a simple and effective task management tool.
### Author
**Abhishek Gurjar** is a passionate web developer. You can check out more of his projects on [GitHub](https://github.com/abhishekgurjar-in).