📝 To-Do List Application

Welcome to the To-Do List Application repository! This project is a simple yet stylish to-do list created using HTML, CSS, and JavaScript. It’s perfect for beginners to learn about web development concepts like DOM manipulation, localStorage, and responsive design.

---

🌟 Features

• Add New Tasks: Easily add tasks to your to-do list using the input field.
• Mark as Done: Complete tasks by clicking the "done" button, which removes them from the list.
• Persistent Storage: Your tasks are saved in your browser's localStorage, so you won’t lose them after refreshing the page.
• Responsive Design: Works seamlessly on different devices and screen sizes.

---

🚀 Getting Started

Follow these steps to run the project:

1️⃣ Clone the Repository

git clone https://github.com/Innocent6303/To-do-list.git

2️⃣ Open the Project

• Navigate to the project folder.

• Open the index.html file in your favorite browser OR:

• Install the Live Server extension in Visual Studio Code.

• Right-click on the index.html file and select Open with Live Server.

---

📋 User Interface

When you open the project, you’ll see:

1. Header:
   A title, "To-Do List" .

2. Input Field:

   • A blank input box with the placeholder New Task.
   • An Add button to add tasks.

3. Task List:

   • Newly added tasks appear at the top of the list.
   • Each task has a done button to remove it once completed.

🎮 How It Works

Adding a Task:

1. Type a task into the input field.
2. Click the Add button or press Enter.
3. The task is displayed in the list at the top.

Completing a Task:

1. Click the done button next to a task.
2. The task is removed from the list --

🔍 Key Concepts Demonstrated

This project is an excellent way to learn the following:

1.DOM Manipulation:

• Dynamically adding, removing, and updating elements on the page using JavaScript.

  Example:

  var todoElement = document.createElement("li");
  var todoText = document.createTextNode(todo);
  todoElement.appendChild(todoText);
  listElement.appendChild(todoElement);

2. Event Handling:

• Adding event listeners to buttons for user interactions.
  Example:

buttonElement.onclick = addTodo;

3. Local Storage:

• Saving tasks in the browser’s localStorage to maintain data persistence.
  Example:

localStorage.setItem("list_todos", JSON.stringify(todos));

4. Responsive and Functional Design:

• Designing a UI that works across devices with minimal styling and optimal functionality

📂 Folder Structure

To-do-list/
│
├── index.html      # Main HTML file
├── styles.css      # Styling for the application
├── script.js       # JavaScript for functionality
└── README.md       # Documentation

---

🎨 Screenshots

1️⃣ Initial Interface

2️⃣ Task Added

3️⃣ Task Marked as Done

📈 Future Enhancements

• Add categories for tasks.
• Allow users to edit tasks.
• Implement a dark mode toggle.
• Add animations for adding and removing tasks.

🤝 Contributions

Contributions are welcome! Feel free to:

• Fork this repository.
• Add new features or fix bugs.
• Submit a pull request.

⭐ Acknowledgments

This project is created as a fun and educational tool for beginners to:

• Learn and practice web development basics.
• Understand JavaScript concepts like localStorage and event handling.

🏆 Show Your Support

⭐ Star this repository if you found it fun and helpful!

Happy Coding! 💻