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

Recent Projects

Follow me

Related Projects

Fun Project

iDragon – A Thrilling JavaScript Game

iDragon is a fun game where players control a dino to dodge obstacles, score points, and test reflexes. Use arrow keys to move and jump, with exciting sound effects and music

Fun Project

Tic Tac Toe Game

The Interactive Tic Tac Toe Game lets two players compete in a 3×3 grid. It includes a simple interface, feedback on wins, and sound effects for added fun.

Form & Input Handling

Text-to-Speech Converter

This Text-to-Speech app lets you type text and listen to it spoken aloud in different voices. Choose a voice, click ‘Listen,’ and hear the text in real-time.

Type to search