📝 Smart To-Do List

A clean and interactive To-Do List web app built using Vanilla JavaScript, focusing on strong DOM manipulation and real-world CRUD operations.

---

🚀 Live Features

✅ Basic

• Add new tasks
• Delete tasks
• Mark tasks as completed

✅ Intermediate

• Edit existing tasks inline
• Persistent storage using localStorage
• Real-time UI updates (state-driven rendering)

⭐ UX Enhancements

• Clean minimal UI
• Instant task updates
• Completed task styling

---

🧠 Concepts Practiced

This project strengthens core JavaScript fundamentals:

• DOM manipulation
• Event handling
• Arrays of objects
• CRUD operations
• Conditional rendering
• classList usage
• JSON.stringify() and JSON.parse()
• Browser localStorage
• State-driven UI design

---

🏗️ Project Structure

Smart-ToDo-List/
│
├── index.html
├── style.css
├── index.js
└── README.md

---

⚙️ How It Works

🔹 Task Creation

• User enters text
• Task object is created with:
  • unique id
  • task name
  • completion status
  • editing state

🔹 State-Driven Rendering

The UI is fully rebuilt from the tasks array using:

tasks → renderTasks() → DOM

This ensures predictable and clean updates.

🔹 Persistent Storage

Tasks are saved in localStorage, so data remains after refresh.

---

▶️ How to Run Locally

1. Clone the repository

git clone <your-repo-link>

2. Open the project folder

3. Run index.html in your browser

✅ No build tools required ✅ No dependencies

---

📸 Future Improvements (Planned)

• Filter (All / Completed / Pending)
• Due dates
• Drag and drop reordering
• Keyboard shortcuts (Enter to save)
• Better mobile responsiveness

---

🙌 Acknowledgement

Built as part of JavaScript fundamentals practice to strengthen real-world DOM and state management skills.

---

📌 Author

Sindhu

---

⭐ If you found this helpful, consider giving the repo a star!