script.js

let new_task = document.getElementById("new-task");
let tasks_list = document.getElementById("tasks-list");

// --------------------------------------------------------------------------------------------------

let to_do_list = JSON.parse(localStorage.getItem("to-do list")) || [];

// --------------------------------------------------------------------------------------------------

window.addEventListener("load", () => {
    if (to_do_list.length == 0) {
        tasks_list.textContent = "No Tasks!";
    }
    else {
        load_tasks();
    }
});

// --------------------------------------------------------------------------------------------------

function load_tasks() {
    tasks_list.innerHTML = "";
    if (to_do_list.length == 0) {
        tasks_list.textContent = "No Tasks!";
        return;
    }
    to_do_list.forEach((task, index) => {
        let p = document.createElement('p');
        p.className = "task";
        p.innerHTML = `
            <span class="span">${task}</span>
            <button class="delete" onclick="delete_task(${index})">Delete</button>
        `;
        tasks_list.appendChild(p);
    });
};

// --------------------------------------------------------------------------------------------------

function add_task() {
    if (new_task.value != "") {
        to_do_list.push(new_task.value);
        localStorage.setItem("to-do list", JSON.stringify(to_do_list));
        new_task.value = "";
        load_tasks();
    }
    else {
        alert("Please Enter A Task!");
    }
};

// --------------------------------------------------------------------------------------------------

function delete_task(index) {
    to_do_list.splice(index, 1);
    localStorage.setItem("to-do list", JSON.stringify(to_do_list));
    load_tasks();
};