Simple To-Do List App

Harjot
October 24, 2024
7:20 pm

Technologies used -

Description

This To-Do List app helps you stay organized by allowing you to add, check off, and delete tasks. With a minimalist design, it’s easy to keep track of your daily to-dos, mark them as completed, and delete them once done. The app even saves your tasks to your browser’s local storage, so your list is there each time you return.

This code handles essential functions:

Add Task: Adds a new task when the user inputs text and clicks “Add”.
Mark Task: Toggles a checked state for tasks, marking them as complete.
Delete Task: Allows users to delete individual tasks.
Save and Load Data: Uses localStorage to save and load tasks, keeping them available even after a browser refresh.

Highlighted Source Code

				
					const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");

function addTask() {
    if (inputBox.value === '') {
        alert("Please write something");
    } else {
        let li = document.createElement("li");
        li.innerHTML = inputBox.value;
        listContainer.appendChild(li);
        let span = document.createElement("span");
        span.innerHTML = "\u00d7";  // Adds a delete button
        li.appendChild(span);
    }
    inputBox.value = "";
    saveData();
}

listContainer.addEventListener("click", function(e) {
    if (e.target.tagName === "LI") {
        e.target.classList.toggle("checked"); // Marks task as completed
        saveData();
    } else if (e.target.tagName === "SPAN") {
        e.target.parentElement.remove(); // Deletes task
        saveData();
    }
}, false);

function saveData() {
    localStorage.setItem("data", listContainer.innerHTML); // Saves tasks to local storage
}

function showTask() {
    listContainer.innerHTML = localStorage.getItem("data"); // Loads saved tasks on page load
}

showTask(); // Displays saved tasks on page load