---

📝 Simple To-Do List

A lightweight, browser-based task management tool built with Vanilla JavaScript. This application allows users to add tasks, mark them as complete, and permanently remove them, with all data persisting across page reloads using Local Storage.

📖 Overview

This project demonstrates how to manipulate the DOM dynamically while ensuring user data isn't lost when the browser is closed. Instead of using a complex database, it leverages the browser's built-in storage to save the exact state of your task list.

📸 Screenshots

✨ Features

• Add Tasks: Dynamically appends new items to the list.
• Task Completion: The "Done" button toggles a visual state (strikethrough/dimmed) to mark items as finished.
• Remove Tasks: The "Remove" button permanently deletes the item from the DOM.
• Data Persistence: Uses localStorage to save the HTML structure of the list. Your tasks remain even after you refresh the page.

🛠️ Tech Stack

• Frontend: HTML5, CSS3
• Logic: Vanilla JavaScript (ES6)
• Storage: Browser LocalStorage API

🚀 How to Run

1. Clone the repository:

git clone https://github.com/Otormin/ToDoList.git

2. Navigate to the folder:

cd ToDoList

3. Launch: Open the index.html file in any modern web browser.

📂 Code Logic

The application uses a smart hydration technique to keep the buttons working after a page reload:

1. Saving: The saveTasks() function grabs the entire innerHTML of the list and saves it as a string in LocalStorage.
2. Loading: On page load, displayTasks() injects that HTML string back into the <ul>.
3. Re-binding: Crucially, addEventListeners() is called immediately after loading to re-attach the "Click" events to the restored buttons (since HTML strings don't save event listeners).

function saveTasks() {
    localStorage.setItem("tasks", JSON.stringify(ulLi.innerHTML));
}

function displayTasks() {
    ulLi.innerHTML = JSON.parse(localStorage.getItem("tasks"));
    // Re-attach listeners after content is restored
}