index.js

const taskAddBtn = document.querySelector(".task-input button");
const taskInput = document.querySelector(".task-input input");
const taskList = document.querySelector(".task-list ul");
const remaningTask = document.querySelector("#remaining-task");

getRemainingTask();

const tasks = JSON.parse(localStorage.getItem("tasks")) || [];

const errorMessages = {
    "emptyValue" : "you cannot leave input as empty.",
    "maxChar" : "you can enter up to 20 characters.",
}

function errorMessage(errorName, errorDescription){

    const errorMsgBox = document.createElement("div");
    const errorMsgDescription = document.createElement("div");
    errorMsgDescription.classList.add("errorMessageBoxDescription");

    const errorMsgIcon = document.createElement("span");
    errorMsgIcon.innerHTML = `<i class="fa-solid fa-circle-exclamation"></i>`;
    errorMsgDescription.appendChild(errorMsgIcon);

    const errorMsgText = document.createElement("span");
    errorMsgText.textContent = `${errorName}: ${errorDescription}`;
    errorMsgDescription.appendChild(errorMsgText);


    errorMsgBox.appendChild(errorMsgDescription);

    const errorMsgBtn = document.createElement("button");
    errorMsgBtn.classList.add("taskBtn");
    errorMsgBtn.innerHTML = `<i class="fa-solid fa-xmark"></i>`;
    errorMsgBox.appendChild(errorMsgBtn);


    errorMsgBox.classList.add("errorMessageBox");    
    taskList.appendChild(errorMsgBox);


    errorMsgBtn.addEventListener("click", () => {
        taskList.removeChild(errorMsgBox);
    });

    setTimeout(() => {
        taskList.removeChild(errorMsgBox);
    }, 2000);
};

function addNewTask(){
    const task = {
        taskName: `${taskInput.value}`,
        checkStatus: false
    }
    tasks.push(task);
    localStorage.setItem("tasks", JSON.stringify(tasks));
    taskInput.value = "";
    window.location.reload();
};

function removeTask(task){
    const taskList = JSON.parse(localStorage.getItem("tasks"));
    let taskIndex = taskList.findIndex(taskList => taskList["taskName"] == task["taskName"]);

    if (taskIndex !== -1){
      taskList.splice(taskIndex, 1);
    };

    localStorage.setItem("tasks", JSON.stringify(taskList));
    window.location.reload();

};

function updateTask(saveBtn, editBtn, taskTools, taskContainer, editInput, newTaskDescription, task){
    newTaskDescription.textContent = editInput.value;
    taskContainer.replaceChild(newTaskDescription, editInput);

    const taskList = JSON.parse(localStorage.getItem("tasks"));
    let taskIndex = taskList.findIndex(taskList => taskList["taskName"] == task["taskName"]);
    taskList[taskIndex]["taskName"] = `${editInput.value}`;
    localStorage.setItem("tasks", JSON.stringify(taskList));
    taskTools.replaceChild(editBtn, saveBtn);
    window.location.reload();
};

function getRemainingTask(){
    const taskList = JSON.parse(localStorage.getItem("tasks")) || [];
    const checkStatusList = [];
    let remain = 0;

    for(let task of taskList){
        checkStatusList.push(task["checkStatus"]);
    };

    checkStatusList.filter((checkStatus) => {
        if(checkStatus == false){
            remain++;
        }
    });

    remaningTask.textContent = `Remaining task: ${remain}`;

    if(remain == 0){
        remaningTask.textContent = `There seems to be no task to complete.`;
    };
};

window.addEventListener("DOMContentLoaded", () => {
    for(let task of tasks){
        const newTask = document.createElement("li");
        newTask.classList.add("task");

        const taskContainer = document.createElement("div");
        taskContainer.classList.add("task-container");

        const checkBtn = document.createElement("button");
        checkBtn.classList.add("checkBtn");
        checkBtn.innerHTML = `<i class="fa-solid fa-check"></i>`;
        taskContainer.appendChild(checkBtn);

        checkBtn.addEventListener("click", () => {
            const taskList = JSON.parse(localStorage.getItem("tasks"));
            let taskIndex = taskList.findIndex(taskList => taskList["taskName"] == task["taskName"]);
            taskList[taskIndex]["checkStatus"] == false ? taskList[taskIndex]["checkStatus"] = true : taskList[taskIndex]["checkStatus"] = false;
            taskList[taskIndex]["checkStatus"] == false ? newTaskDescription.classList.remove("checked") : newTaskDescription.classList.add("checked");
            
            localStorage.setItem("tasks", JSON.stringify(taskList));

            getRemainingTask();
        });

        const newTaskDescription = document.createElement("span");
        newTaskDescription.textContent = `${task["taskName"]}`;

        if(task["checkStatus"]){
            newTaskDescription.classList.add("checked");
        };

        taskContainer.appendChild(newTaskDescription);  

        const toolBtn = document.createElement("button");
        toolBtn.innerHTML = `<i class="fa-solid fa-ellipsis"></i>`;
        toolBtn.classList.add("taskBtn");
        newTask.appendChild(taskContainer);
        newTask.appendChild(toolBtn);
        taskList.appendChild(newTask);

        toolBtn.addEventListener("click", () => {
            const taskTools = document.createElement("div");
            taskTools.classList.add("taskTools");
    
            const editBtn = document.createElement("button");
            editBtn.innerHTML = `<i class="fa-solid fa-pencil"></i>`;
            editBtn.classList.add("taskBtn");
    
            const deleteBtn = document.createElement("button");
            deleteBtn.innerHTML = `<i class="fa-solid fa-trash"></i>`;
            deleteBtn.classList.add("taskBtn");
    
            const closeBtn = document.createElement("button");
            closeBtn.innerHTML = `<i class="fa-solid fa-xmark"></i>`;
            closeBtn.classList.add("taskBtn");
    
            newTask.replaceChild(closeBtn, toolBtn);
    
            taskTools.appendChild(editBtn);
            taskTools.appendChild(deleteBtn);
            newTask.appendChild(taskTools);
    
            closeBtn.addEventListener("click", () => {
                newTask.removeChild(taskTools);
                newTask.replaceChild(toolBtn, closeBtn);
            });
    
            deleteBtn.addEventListener("click", () => {
                removeTask(task);
            });

            editBtn.addEventListener("click", () => {
                const editInput = document.createElement("input");
                editInput.placeholder = "write your new task";
                taskContainer.replaceChild(editInput, newTaskDescription);

                const saveBtn = document.createElement("button");
                saveBtn.innerHTML = `<i class="fa-solid fa-floppy-disk"></i>`;
                saveBtn.classList.add("taskBtn");

                taskTools.replaceChild(saveBtn, editBtn);

                saveBtn.addEventListener("click", () => {
                    if(editInput.value == ""){
                        errorMessage(Object.keys(errorMessages)[0], errorMessages.emptyValue);
                    }
                    else if(editInput.value.length > 20){
                        errorMessage(Object.keys(errorMessages)[1], errorMessages.maxChar)
                    }
                    else{
                        updateTask(saveBtn, editBtn, taskTools, taskContainer, editInput, newTaskDescription, task);
                    }
                });
            });
            
        });
    };
});

taskAddBtn.addEventListener("click", () => {

    if(taskInput.value == ""){
       errorMessage(Object.keys(errorMessages)[0], errorMessages.emptyValue);
    }
    
    else if(taskInput.value.length > 20){
        errorMessage(Object.keys(errorMessages)[1], errorMessages.maxChar);
    }
    
    else{
        addNewTask();
    }

});