Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shrikant9907/to-do-list-app-html-css-javascript
Simple To Do List Application using HTML, CSS and JavaScript
https://github.com/shrikant9907/to-do-list-app-html-css-javascript
app css do first-app html javascript list to to-do to-do-app to-do-list to-do-list-application to-do-list-javascript todo todolist
Last synced: 11 days ago
JSON representation
Simple To Do List Application using HTML, CSS and JavaScript
- Host: GitHub
- URL: https://github.com/shrikant9907/to-do-list-app-html-css-javascript
- Owner: shrikant9907
- License: mit
- Created: 2024-09-25T09:13:12.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-05T16:07:35.000Z (2 months ago)
- Last Synced: 2024-12-05T17:20:50.600Z (2 months ago)
- Topics: app, css, do, first-app, html, javascript, list, to, to-do, to-do-app, to-do-list, to-do-list-application, to-do-list-javascript, todo, todolist
- Language: JavaScript
- Homepage: https://shrikant9907.github.io/to-do-list-app-html-css-javascript/
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# To-Do List Application | HTML, CSS, and JavaScript
A simple and efficient To-Do List application built using HTML, CSS, and JavaScript. This application helps users manage their tasks with a user-friendly interface. It’s a beginner-friendly project that introduces fundamental web development concepts.
---
## Features
- **Add Task**: Allows users to input a task and click "Add Task" to add it to the list.
- **Complete Task**: Users can click on a task to mark it as completed (strikethrough effect).
- **Delete Task**: Users can remove a specific task by clicking the "Delete" button.
- **Local Storage Support**: Tasks persist in the browser's local storage, ensuring the list remains intact even after refreshing the page.
---
## Built With
- **HTML**
- **CSS**
- **JavaScript**
---
## How to Run the Application
1. Create three files: `index.html`, `style.css`, and `script.js`.
2. Copy and paste the appropriate code into each file.
3. Open `index.html` in your web browser to view and interact with the application.
---
## Screenshot of Each Page
### Main View
---
## Learning Objectives
This project demonstrates the following concepts:
- DOM manipulation using JavaScript.
- Event handling in JavaScript.
- CSS for responsive web design.
- Use of local storage to persist data.
- Structuring code for small web applications.
---
## Potential Enhancements
As you progress, you can extend this application with the following features:
1. **Search Functionality**: Add a search bar to filter tasks based on user input.
2. **Task Categories**: Allow users to categorize tasks (e.g., Work, Personal, etc.).
3. **Dark/Light Mode**: Provide a toggle for dark and light themes.
4. **Task Prioritization**: Add priority levels (e.g., High, Medium, Low) for tasks.
5. **Drag and Drop**: Enable drag-and-drop functionality to rearrange tasks.
6. **Save and Export**: Allow users to save and export their tasks to a file.
---
## Created By
**Shrikant Yadav**
Full Stack Web Developer
[LinkedIn Profile](https://www.linkedin.com/in/shrikant9907/)
---
## Training Programs
We provide the following training programs in Web Design and Development:
- **MERN Stack Development**: [Learn More](https://shrimo.com/courses/web-development/full-stack-web-dev-basic-to-advanced)
- **Full Stack Development**: [Learn More](https://shrimo.com/courses/web-development/full-stack-web-dev-basic-to-advanced)
- **React JS Development**: [Learn More](https://shrimo.com/courses/web-development/frontend-react-js-mastery-basic-to-advanced)
- **Node JS Development**: [Learn More](https://shrimo.com/courses/web-development/full-stack-web-dev-basic-to-advanced)
Programs range from 3 months to 1 year. For more information on training, feel free to contact us.
---
## Web Developer Services
We also offer Web Developer services, including custom web development, design, and consultation for various projects.
---
## Contact Details
- Email: [[email protected]](mailto:[email protected])
- Phone: +91 9907472038
- Location: Hoshangabad (Narmadapuram), India
For services or training, contact us at:
- **Company Name**: Shrimo Innovations Pvt Ltd
- **Website**: [https://shrimo.com/](https://shrimo.com/)
---
## Online/Offline Training
Looking to advance your web development career? Join our online and offline training programs available in Hoshangabad (Narmadapuram) and beyond. Learn everything from basic to advanced concepts in Full Stack and MERN Stack development with practical hands-on projects. Enroll today and start building your career!
---
## License
This project is open source and available under the [MIT License](LICENSE).