https://github.com/darshanas17/todo-list-html-css-js
A simple and responsive Todo List application built with HTML, CSS, and JavaScript.
https://github.com/darshanas17/todo-list-html-css-js
bootstrap css html javascript local-storage responsive-design todo-list
Last synced: about 1 month ago
JSON representation
A simple and responsive Todo List application built with HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/darshanas17/todo-list-html-css-js
- Owner: Darshanas17
- License: mit
- Created: 2025-01-07T09:52:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-07T10:20:11.000Z (over 1 year ago)
- Last Synced: 2025-01-07T10:46:32.053Z (over 1 year ago)
- Topics: bootstrap, css, html, javascript, local-storage, responsive-design, todo-list
- Language: JavaScript
- Homepage: https://darshanas17.github.io/Todo-List-HTML-CSS-JS/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Todo List Application
A simple and intuitive Todo List web application where users can add, mark as complete, delete tasks, and save them to local storage.
## Features
- **Add Tasks**: Users can add new tasks to their todo list.
- **Mark as Complete**: Checkboxes allow users to mark tasks as complete.
- **Delete Tasks**: Users can delete individual tasks from the list.
- **Save Tasks**: Tasks are stored in the browser's local storage, so they persist across sessions.
## Technologies Used
- **HTML**: For structuring the web page.
- **CSS**: For styling the application.
- **JavaScript**: For interactivity and functionality.
- **Bootstrap**: For responsive design and styling components.
- **Font Awesome**: For icons (e.g., trash icon for delete).
## Getting Started
Follow the steps below to get this project running locally:
### Prerequisites
- A web browser (e.g., Chrome, Firefox, Edge).
### Installation
1. Clone this repository to your local machine:
```bash
git clone https://github.com/Darshanas17/Todo-List-HTML-CSS-JS.git
```
2. Navigate to the project directory:
```bash
cd Todo-List-HTML-CSS-JS
```
3. Open the `index.html` file in your web browser:
```bash
open index.html
```
## File Structure
```
todo-list-app/
├── index.html # Main HTML file
├── style.css # CSS file for styling
├── script.js # JavaScript file for functionality
└── README.md # Project documentation
```
## Usage
1. Open the application in your web browser.
2. Type a task in the input box and click the "Add" button to add it to the list.
3. Use the checkboxes to mark tasks as completed. Completed tasks will have a strikethrough.
4. Click the trash icon to delete a task.
5. Click the "Save" button to store the tasks in the browser's local storage.
## Screenshots
### Main Interface
### Adding Tasks
### Marking Tasks as Complete
## Future Enhancements
- Add due dates and reminders for tasks.
- Integrate with a backend for user accounts and cloud storage.
- Implement drag-and-drop to reorder tasks.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---
**Happy Coding!**