📝 Todo List

A modern and responsive Todo List application built with JavaScript, Webpack, and ES6 Modules.

The application allows users to organize tasks into multiple projects, manage task priorities, and save all data using the browser's Local Storage.

---

✨ Features

• Create multiple projects
• Add todos to any project
• Switch between projects
• Mark todos as complete/incomplete
• Delete todos
• Set task priority (Low, Medium, High)
• Add descriptions and due dates
• Automatically saves data using Local Storage
• Responsive design
• Modal form for creating todos
• Clean and modular JavaScript architecture

---

🛠️ Built With

• HTML5
• CSS3
• JavaScript (ES6)
• Webpack
• npm
• Local Storage API

---

📂 Project Structure

todo-list-js/
│
├── dist/
├── node_modules/
├── src/
│   ├── index.js
│   ├── ui.js
│   ├── dom.js
│   ├── storage.js
│   ├── project.js
│   ├── todo.js
│   ├── style.css
│   └── template.html
│
├── webpack.config.js
├── package.json
├── package-lock.json
├── .gitignore
└── README.md

---

⚙️ Installation

Clone the repository:

git clone https://github.com/salman61101/todo-list-js.git

Go inside the project:

cd todo-list-js

Install dependencies:

npm install

Start the development server:

npm start

Build for production:

npm run build

---

💾 Local Storage

This project uses the browser's Local Storage API to save projects and todos.

All tasks remain available even after refreshing the page.

---

📚 What I Learned

During this project I practiced:

• ES6 Modules
• Factory Functions
• DOM Manipulation
• Event Handling
• Dynamic UI Rendering
• Object-Oriented JavaScript
• Local Storage
• Webpack
• npm
• Project Architecture
• Responsive Design

---

🎯 Future Improvements

• Edit existing todos
• Delete projects
• Search todos
• Filter by priority
• Dark mode
• Drag and drop task ordering
• Due date reminders

---

👨‍💻 Author

Salman

GitHub: https://github.com/salman61101

---

📄 License

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