script.js

const todoForm = document.querySelector('form');
const todoInput = document.getElementById('todo-box');
const todoListUl = document.getElementById('todo-list');

let allTodos = getTodos();
updateTodoList();

todoForm.addEventListener('submit', function (e) {
    e.preventDefault();
    addTodo();
})
function addTodo() {
    const todoText = todoInput.value.trim();
    if (todoText.length > 0) {
        const todoObject = {
            text: todoText,
            completed: false
        }
        allTodos.push(todoObject);
        updateTodoList();
        saveTodos();
        todoInput.value = "";
    }
}
function updateTodoList() {
    todoListUl.innerHTML = "";
    allTodos.forEach((todo, todoIndex) => {
        todoItem = createTodoItem(todo, todoIndex);
        todoListUl.append(todoItem);
    })
}
function createTodoItem(todo, todoIndex) {
    const todoId = "todo-check-" + todoIndex;
    const todoLi = document.createElement("li");
    const todoText = todo.text;
    todoLi.className = "todo";
    todoLi.innerHTML = `
    <input type="checkbox" id="${todoId}">
                <label for="${todoId}" class="custom-checkbox">
                    <svg fill="transparent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="green">
                        <path
                            d="M9 16.17l-3.88-3.88a1 1 0 00-1.41 1.41l4.59 4.59a1 1 0 001.41 0l10-10a1 1 0 00-1.41-1.41L9 16.17z" />
                    </svg>
                </label>
                <label for="${todoId}" class="todo-text" id="todo-text">
                    ${todoText}  
                </label>
                <button class="delete-button">
                    <svg fill="var(--secondary-color)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="red">
                        <path
                            d="M6 7v13a2 2 0 002 2h8a2 2 0 002-2V7H6zm3 11a1 1 0 01-2 0V9a1 1 0 012 0v9zm4 0a1 1 0 01-2 0V9a1 1 0 012 0v9zm4 0a1 1 0 01-2 0V9a1 1 0 012 0v9zM15.5 4l-.79-.79A1 1 0 0014 3H10a1 1 0 00-.71.29L8.5 4H5a1 1 0 000 2h14a1 1 0 000-2h-3.5z" />
                    </svg>
                </button>
    `
    const deleteButton = todoLi.querySelector(".delete-button");
    deleteButton.addEventListener("click", () => {
        deleteTodoItem(todoIndex);
    })
    const checkbox = todoLi.querySelector("input");
    checkbox.addEventListener("change", ()=>{
        allTodos[todoIndex].completed = checkbox.checked;
        saveTodos();
    })
    checkbox.checked = todo.completed;
    return todoLi;
}
function deleteTodoItem(todoIndex) {
    allTodos = allTodos.filter((_, i) => i !== todoIndex);
    saveTodos();
    updateTodoList();
}
function saveTodos() {
    const todosJson = JSON.stringify(allTodos);
    localStorage.setItem("todos", todosJson);
}
function getTodos() {
    const todos = localStorage.getItem("todos") || "[]";
    return JSON.parse(todos);
}