document.addEventListener("DOMContentLoaded", loadFromStorage);

        function addTodo() {
            let todoInput = document.getElementById("todo-input");
            let todoText = todoInput.value.trim();
            if (todoText === "") return;

            let todoList = document.getElementById("todo-list");
            let li = document.createElement("li");

            li.innerHTML = `
                ${todoText}
                <button class="btn-delete" onclick="removeTodo(event)">🗑️</button>
            `;

            li.addEventListener("click", () => openModal(todoText));
            todoList.appendChild(li);
            todoInput.value = "";
            saveToStorage();
        }

        function removeTodo(event) {
            event.stopPropagation();
            event.target.parentElement.remove();
            saveToStorage();
        }

        function saveNote() {
            let noscript = document.getElementById("note-noscript").value.trim();
            let content = document.getElementById("note-content").value.trim();
            if (noscript === "" || content === "") return;

            let notesContainer = document.getElementById("notes-container");
            let noteDiv = document.createElement("div");
            noteDiv.classList.add("note");
            noteDiv.innerHTML = `
                <span>${noscript}</span>
                <button class="btn-delete" onclick="removeNote(event, '${noscript}')">🗑️</button>
            `;
            noteDiv.onclick = () => openModal(noscript, content);

            notesContainer.appendChild(noteDiv);

            document.getElementById("note-noscript").value = "";
            document.getElementById("note-content").value = "";
            saveToStorage();
        }

        function removeNote(event, noscript) {
            event.stopPropagation();
            event.target.parentElement.remove();
            saveToStorage();
        }

        function openModal(noscript, content = "") {
            document.getElementById("modal-noscript").innerText = noscript;
            document.getElementById("modal-content").innerText = content;
            document.querySelector(".modal-overlay").style.display = "block";
            document.getElementById("modal").style.display = "block";
        }

        function closeModal() {
            document.querySelector(".modal-overlay").style.display = "none";
            document.getElementById("modal").style.display = "none";
        }

        function toggleDarkMode() {
            document.body.classList.toggle("dark-mode");
            localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
        }

        function saveToStorage() {
            let todos = Array.from(document.querySelectorAll("#todo-list li")).map(li => li.innerText.replace("🗑️", "").trim());
            let notes = Array.from(document.querySelectorAll("#notes-container .note span")).map(note => note.innerText);
            localStorage.setItem("todos", JSON.stringify(todos));
            localStorage.setItem("notes", JSON.stringify(notes));
        }

        function loadFromStorage() {
            let todos = JSON.parse(localStorage.getItem("todos")) || [];
            let notes = JSON.parse(localStorage.getItem("notes")) || [];

            todos.forEach(todo => addTodoItem(todo));
            notes.forEach(noscript => saveNoteItem(noscript));

            if (localStorage.getItem("darkMode") === "true") {
                document.body.classList.add("dark-mode");
            }
        }