📝 Modern Todo App with Dark Mode

Welcome to your new favorite Todo App! This project is a beautiful, responsive, and feature-rich todo list application built with pure HTML, CSS, and JavaScript. It’s designed to be simple, fast, and delightful to use—whether you’re on desktop or mobile.

---

🚀 Features

• Add, Edit, Complete, and Delete Tasks
• Dark Mode Toggle for comfortable night-time use
• Responsive Design for all devices
• Persistent Storage using localStorage
• Modern UI with gradients, shadows, and smooth animations
• Accessible and Keyboard-Friendly

---

🌟 Why This Todo App Stands Out

Most todo apps are either too simple or too cluttered. This app strikes the perfect balance:

• Minimalist, yet powerful: All essential features, no distractions.
• Beautiful design: Gradient backgrounds, elegant buttons, and subtle animations.
• Dark mode: Toggle instantly for eye comfort.
• Instant feedback: Every action is smooth and visually clear.

---

🖥️ How It Works

1. Add a Task: Type in the input and hit "Add Task" or press Enter.
2. Complete/Undo: Click the green ✓ to mark as done, or ↶ to undo.
3. Edit: Click the blue ✎ to edit any task inline.
4. Delete: Click the red × to remove a task.
5. Dark Mode: Use the toggle in the top-right corner to switch themes.
6. Persistence: All tasks are saved in your browser, so you never lose them.

---

📱 Responsive & Accessible

• Mobile-first: Works perfectly on phones and tablets.
• Keyboard navigation: Add tasks with Enter, tab between buttons.
• Accessible colors: High contrast and clear focus states.

---

🛠️ Tech Stack

• HTML5: Semantic structure
• CSS3: Flexbox, gradients, transitions, dark mode
• JavaScript: Vanilla JS for all logic and interactivity

---

💡 Design Highlights

• Gradient backgrounds for a modern look
• Circular, animated buttons for actions
• Subtle shadows and transitions for depth
• Tooltips for better usability
• Clean, readable fonts

---

📂 Project Structure

index.html      # Main HTML file
style.css       # All styles, including dark mode
script.js       # App logic and interactivity
readme.md       # This documentation

---

🏁 Getting Started

1. Clone or download this repository.
2. Open index.html in your browser.
3. Start organizing your life!

No build tools, no dependencies—just open and use.

---

🙌 Credits & Inspiration

• Inspired by modern productivity apps and UI trends.
• Icons: Unicode symbols for universal compatibility.
• Designed for learning, productivity, and fun!

---