📝 To-Do List Web Application

📌 Project Overview

The To-Do List Web Application is a simple and interactive task management application built using HTML, CSS, and JavaScript. It allows users to add tasks dynamically and remove tasks easily with a double-click action.

This project demonstrates:

• DOM manipulation using JavaScript
• Event handling
• Dynamic creation of HTML elements
• Responsive web design using CSS

The application provides a clean and user-friendly interface for managing daily tasks.

---

🎯 Features

• ➕ Add tasks dynamically
• ❌ Delete tasks by double-clicking
• ⚠️ Prevent adding empty tasks
• 📱 Responsive design for mobile devices
• 🎨 Attractive and simple user interface

---

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (Vanilla JS)

---

📂 Project Structure

To-Do-List-App/
│
├── index.html      # Main HTML structure
├── style.css       # Styling file
├── script.js       # JavaScript functionality
├── README.md       # Project documentation

---

📄 File Descriptions

1. index.html

Contains:

• Input field for entering tasks
• Task list container
• Links to CSS and JavaScript files

---

2. style.css

Provides:

• Layout styling
• Responsive design
• Task item styling
• Background colors and alignment

Includes media queries for mobile responsiveness.

---

3. script.js

Handles:

• Adding new tasks
• Removing tasks
• Event listeners
• Input validation

Tasks are dynamically added to the task list using JavaScript DOM manipulation.

---

⚙️ How the Project Works

Step 1: User Enters a Task

The user types a task into the input field.

Step 2: Press Enter Key

When the user presses the Enter key:

• A new task item is created
• The task is added to the top of the list
• Empty tasks are prevented

if(e.key == "Enter")

Step 3: Delete a Task

Double-clicking on a task removes it from the list.

li.addEventListener("dblclick", taskDeleter);

---

🚀 How to Run the Project

Step 1: Clone the Repository

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

Step 2: Open the Project Folder

cd todo-list-app

Step 3: Run the Application

Open index.html in any web browser.

---

💻 Sample Working

Adding Task

Input:

Buy groceries

Output:

Task added successfully

---

Deleting Task

Double-click the task item to remove it.

---

📱 Responsive Design

The application adapts to smaller screen sizes using CSS media queries.

@media only screen and (max-width : 768px)

---

🎨 User Interface Highlights

• Rounded input box
• Styled task items
• Centered layout
• Clean color combination
• Mobile-friendly design

---

🔥 Future Enhancements

• Add task completion checkbox
• Store tasks using Local Storage
• Add edit task functionality
• Add dark mode
• Add task categories and priorities

---

📚 Concepts Used

• DOM Manipulation
• Event Handling
• JavaScript Functions
• CSS Flexbox
• Responsive Web Design

---

🤝 Contribution

Contributions are welcome.

Steps:

1. Fork the repository
2. Create a new branch
3. Make improvements
4. Submit a pull request

---

📄 License

This project is open-source and free to use for educational purposes.

---

👩‍💻 Author

Developed as a beginner-friendly JavaScript project for learning DOM manipulation and event handling.