📝 Build a Simple To-Do List App

This project demonstrates how to manipulate the DOM, handle events, and store data using JavaScript.

📄 HTML Structure

<div id="todo-container">
    <input type="text" id="todo-input" placeholder="Add a task..." />
    <button id="add-btn">Add</button>
    <ul id="todo-list"></ul>
</div>

🎯 JavaScript Logic

const input = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const list = document.getElementById("todo-list");

addBtn.addEventListener("click", () => {
    const task = input.value.trim();
    if (task === "") return;

    const li = document.createElement("li");
    li.textContent = task;

    const delBtn = document.createElement("button");
    delBtn.textContent = "❌";
    delBtn.onclick = () => li.remove();

    li.appendChild(delBtn);
    list.appendChild(li);
    input.value = "";
});

🎨 Basic Styles (Optional)

<style>
#todo-container {
    max-width: 400px;
    margin: auto;
}
input {
    width: 70%;
    padding: 8px;
}
button {
    margin-left: 5px;
    padding: 8px 12px;
}
li {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
}
</style>

✅ Skills You'll Practice

• DOM Selection and Manipulation
• Event Handling
• Creating and Appending Elements
• Simple UX interactions