This is a Todo List application built with React that allows users to add, edit, delete, and view their todos. The application also features a dark mode toggle and a summary popup displaying the count of todos.
- Add Todo: Add a new todo item.
- Edit Todo: Edit an existing todo item.
- Delete Todo: Delete a todo item after confirmation.
- View Todos: View all todo items, with an option to show/hide completed todos.
- Dark Mode: Toggle between dark and light modes.
- Summary Popup: Display a popup showing the total count of todos.
-
Clone the repository:
git clone https://github.com/yourusername/todo-list-app.git
To build a Docker image for the Todo List application, run the following command in the project directory:
docker build -t todo-list-app
- Start the development server:
docker run -d -p 5173:5173 todo-list-app
- Open your browser and go to
http://localhost:5173
.
- Navbar: The navigation bar with a dark mode toggle.
- TodoItem: Represents an individual todo item.
- DeleteConfirmation: Modal for confirming the deletion of a todo item.
- Footer: The footer of the application.
- Home: The home page of the application.
- Loading: A loading spinner displayed while data is being fetched.
- TodoCounter: Popup that displays the total count of todos.
This project uses Vite as the build tool for fast and optimized development, and Tailwind CSS, a utility-first CSS framework, for quick and easy styling of components.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.