https://github.com/siddiqui145/todolist_react
A React.js-based To-Do List application built to streamline task management. The app features a sleek, responsive design, enabling users to efficiently add, remove, edit, and manage their daily tasks. With core focus on usability, this project demonstrates foundational React concepts such as component-based architecture, state management, etc.
https://github.com/siddiqui145/todolist_react
bootstrap5 css reactjs
Last synced: 3 months ago
JSON representation
A React.js-based To-Do List application built to streamline task management. The app features a sleek, responsive design, enabling users to efficiently add, remove, edit, and manage their daily tasks. With core focus on usability, this project demonstrates foundational React concepts such as component-based architecture, state management, etc.
- Host: GitHub
- URL: https://github.com/siddiqui145/todolist_react
- Owner: Siddiqui145
- License: mit
- Created: 2024-09-24T14:03:15.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-12-15T18:59:35.000Z (6 months ago)
- Last Synced: 2025-01-03T11:17:34.758Z (5 months ago)
- Topics: bootstrap5, css, reactjs
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DIEMS To-Do List Web App
The **DIEMS To-Do List** is a fully responsive, dynamic task management web app built with **ReactJS**. The app allows users to add, edit, and delete tasks, mark tasks as complete, and toggle between light and dark modes. It is designed for optimal user experience, with real-time updates and a sleek, modern UI.
## Features
- **Add/Edit/Delete Tasks**: You can easily manage your tasks with intuitive buttons for adding, editing, and deleting tasks.
- **Dynamic Task Numbering**: Tasks are numbered automatically, and the list is reordered whenever a task is added or removed.
- **Mark Tasks as Complete**: You can mark tasks as complete, and they will be styled with a strikethrough.
- **Dark Mode Toggle**: Switch between light and dark modes for better usability in different environments.
- **Custom Alert System**: Alerts the user for important messages like duplicate task entries or empty task submissions.
- **Responsive Design**: The app looks great on devices of all sizes.
## Technologies Used
- **ReactJS**: For building the user interface and managing state.
- **CSS**: For styling, with conditional rendering for light and dark modes.
- **JavaScript**: For dynamic task management and event handling.
## Installation and Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/Siddiqui145/ToDoList_React.git
```
2. Navigate to the project folder:
```bash
cd ToDoList_React
```
3. Install dependencies:
```bash
npm install
```
4. Run the app:
```bash
npm start
```
The app will be available at `http://localhost:3000/`.
## How to Use
1. **Add a Task**: Enter your task in the provided textbox and click the "Add Task" button.
2. **Edit a Task**: To edit a task, click the "Edit" button next to the task you want to modify. Make your changes, and then click "Update Task."
3. **Delete a Task**: Click the "Delete" button next to a task to remove it from the list.
4. **Mark a Task as Complete**: Click "Complete" to strike through the task and mark it as done.
5. **Toggle Dark Mode**: Use the "Toggle Dark Mode" button to switch between light and dark themes.
## Future Enhancements
- **Task Categories**: Group tasks by categories for better organization.
- **Due Dates**: Add the ability to assign due dates to tasks.
- **Reminders**: Implement notifications for upcoming or overdue tasks.
## Screenshots
### Light Mode:
### Dark Mode:
## License
This project is open-source under the [MIT License](LICENSE).
---
Feel free to tweak the GitHub `README.md` and LinkedIn caption as needed!