📝 To-Do List Web Application

A clean, responsive, and beginner-friendly To-Do List App built with HTML, CSS, and Vanilla JavaScript, featuring task creation, completion toggling, deletion, and localStorage support to keep tasks saved even after refreshing the page.

This project is perfect for learning DOM manipulation, event handling, and small-scale front-end application development.

---

🚀 Features

✔ Add New Tasks

Users can type any task and click Add or press Enter to instantly create a new task.

✔ Mark Tasks as Completed

Click on any task to toggle its completed state (strikethrough + checkmark icon).

✔ Delete Tasks

Each task includes a delete (×) button to remove it instantly.

✔ Persistent Storage (localStorage)

All tasks are automatically saved in the browser—your list stays intact even after page reloads.

✔ Clean & Modern UI

Smooth animations, rounded design, gradient background, and responsive layout.

✔ 100% Vanilla JavaScript

No frameworks, no libraries — pure JavaScript, HTML & CSS.

---

📂 Project Structure

todo-list-app/
│
├── index.html
├── style.css
├── script.js
├── README.md
├── .gitignore
└── images/
    ├── icon.png
    ├── checked.png
    └── unchecked.png

---

🛠️ Technologies Used

• HTML5 – Structure of the application
• CSS3 – Styling, layout, animations
• JavaScript (ES6) – Application logic
• LocalStorage API – Saving tasks permanently

---

📦 How to Run the Project

▶ Option 1 — Run Locally

1. Download or clone this repository:

   git clone https://github.com/YOUR_USERNAME/todo-list-app.git

2. Open the project folder.

3. Double-click index.html to launch the app in your browser.

---

▶ Option 2 — Run with Live Server (Recommended)

1. Install the Live Server extension in VS Code.
2. Right-click index.html → Open with Live Server.

---

🌐 Deploy on GitHub Pages

1. Go to your repo → Settings

2. Scroll to Pages

3. Select:

   • Source: main
   • Folder: /root

4. Click Save

Your live app will appear at:

https://YOUR_USERNAME.github.io/todo-list-app/

---

🧠 What You Learn from This Project

• DOM manipulation
• JavaScript event handling
• Working with dynamic DOM elements
• LocalStorage for persistent data
• UI styling with CSS
• Structuring a front-end project
• Deploying static sites on GitHub Pages

---

🚧 Future Improvements

Here are some optional enhancements you can add later:

• Edit tasks feature
• Search / filter tasks
• Dark / Light mode toggle
• Clear all completed tasks
• Animation effects on add/delete

---

🤝 Contributing

Contributions, suggestions, and improvements are welcome! Feel free to fork the repository and submit a pull request.

---

📄 License

This project is open-source and available under the MIT License.

---

Whatsapp: +923004311138

If you need help or want more JavaScript projects, feel free to reach out!