https://github.com/gzixnine/to_do_list
The To-Do List project is a versatile tool designed to help you stay organized and manage daily tasks. As part of my journey at Elzero Web School, I explored HTML, CSS, and JavaScript to create this responsive and interactive web application. It serves both as a practical task manager and a demonstration of my front-end development skills.
https://github.com/gzixnine/to_do_list
css3 elzero-web-school html5 js svg to-do-app to-do-list to-do-list-javascript
Last synced: about 1 month ago
JSON representation
The To-Do List project is a versatile tool designed to help you stay organized and manage daily tasks. As part of my journey at Elzero Web School, I explored HTML, CSS, and JavaScript to create this responsive and interactive web application. It serves both as a practical task manager and a demonstration of my front-end development skills.
- Host: GitHub
- URL: https://github.com/gzixnine/to_do_list
- Owner: GziXnine
- License: mit
- Created: 2024-08-30T20:25:55.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-07T00:32:35.000Z (3 months ago)
- Last Synced: 2025-02-07T01:23:51.772Z (3 months ago)
- Topics: css3, elzero-web-school, html5, js, svg, to-do-app, to-do-list, to-do-list-javascript
- Language: CSS
- Homepage: https://gzixnine.github.io/To_Do_List/
- Size: 15.6 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
Welcome to the **To-Do List** project! Inspired by [Elzero Web School](https://elzero.org/), this tool is designed to help you stay organized and manage your daily tasks effectively. With a clean interface and easy-to-use features, you can keep track of everything you need to do!
## 🚀 Live Demo
Check out the live version of the To-Do List [here](https://gzixnine.github.io/To_Do_List/).
## 🛠️ How It Works
1. **Add Tasks**: Simply type your task in the input field and hit "Add" to include it in your list.
2. **Mark as Completed**: Click the "Complete" button next to each task to mark it as done, or click it again to unmark it.
3. **Delete Tasks**: Use the delete button next to each task to remove it from your list.
4. **Persistent Storage**: Your tasks are saved automatically, so you can close and return anytime without losing your data.
## ✨ Features
- **Simple and Intuitive UI**: A clean design that keeps the focus on your tasks.
- **Responsive Design**: Works seamlessly across all devices, whether you're on a desktop, tablet, or mobile.
- **Real-Time Updates**: Instant feedback as you add, complete, or delete tasks.
- **Local Storage**: Keeps your tasks saved in your browser, even when you close the page.
## 📚 Learning Outcomes
This project was built to enhance and apply key web development concepts, including:
- **HTML/CSS**: Structuring and styling a responsive, user-friendly interface.
- **JavaScript**: Managing task data, handling events, and interacting with the DOM.
- **Local Storage**: Implementing persistent data storage in the browser.
## 🛠️ Technologies Used
- **HTML/CSS**: Building the structure and styling the interface.
- **Vanilla JavaScript**: Adding dynamic interactions and local storage functionality.
## 🌟 Acknowledgments
Special thanks to [Elzero Web School](https://elzero.org/) for the guidance and inspiration in creating this project.
## 📬 Contact
If you have any questions or feedback, feel free to reach out:
- **GitHub**: [GziXnine](https://github.com/GziXnine)
- **LinkedIn**: [Ahmed Allam](https://www.linkedin.com/in/1ahmed-allam)