Personalizando la interfaz del administrador de tareas

Extensión de Chrome para ver y manipular los datos del localStrorage: <https://chromewebstore.google.com/detail/local-storage/nnlekldijoehomfgfciodmolohhfkfpm?hl=pt-BR&pli=1>

Para solucionar el problema de la persistencia yo he decidido crear una función loadTheme( ) que se llama antes de loadTasks( ). * Esta función comprueba si en localStorage existe un theme y si lo hay, lo añade a las clases de body. * La clase 'light-theme' muestra los estilos default igual que si no estuviera ya que ni siquiera está en la CSS. ```js const themeToggleButton = document.getElementById('toggle-theme-btn') loadTheme() loadTasks() function loadTheme() { const theme = localStorage.theme if(theme) { document.body.classList.add(theme) } } themeToggleButton.addEventListener('click', () => { document.body.classList.toggle('dark-theme') const theme = document.body.classList.contains('dark-theme') ? 'dark-theme' : 'light-theme' localStorage.setItem('theme', theme) }) ```

Aca les comparto mi codigo final, por si le quieren hechar un vistazo / alguna sugerencia JAVASCRIPT: ```js // Variables globales const taskButton = document.getElementById('main-button'); const mainInput = document.getElementById('main-input'); const main = document.getElementById('main-div'); const changeBack = document.getElementById('changeBackButton'); const body = document.getElementById('body'); let tasks = []; // Función para añadir las tareas tanto al DOM como al localStorage function addTask() { const task = mainInput.value.trim(); if (task) { createTaskElement(task); tasks.push(task); updateLocalStorage(); // Actualizamos el localStorage } else { alert('Please enter a task'); } mainInput.value = ''; // Limpiamos el input } // Función para crear los elementos de una tarea function createTaskElement(task) { const taskDiv = document.createElement('div'); const taskElement = document.createElement('p'); const otherFDiv = document.createElement('div'); const deleteP = document.createElement('p'); const editP = document.createElement('p'); deleteP.textContent = 'delete'; editP.textContent = 'edit'; otherFDiv.classList = 'other-functions'; taskElement.textContent = task; taskDiv.classList = 'task-section'; taskElement.classList = 'main-task'; deleteP.classList.add('delete'); editP.classList.add('edit'); // Añadimos cada uno a su respectivo contenedor padre main.append(taskDiv); taskDiv.append(taskElement); taskDiv.append(otherFDiv); otherFDiv.append(deleteP); otherFDiv.append(editP); } // Función para actualizar el localStorage function updateLocalStorage() { localStorage.setItem('tasks', JSON.stringify(tasks)); } // Función para cargar las tareas del localStorage function loadTasks() { const savedTasks = localStorage.getItem('tasks'); if (savedTasks && savedTasks.length > 0) { tasks = JSON.parse(savedTasks); tasks.forEach(createTaskElement); // Crea el DOM para cada tarea almacenada } } // Función para eliminar tareas function deleteTask(event) { const taskDiv = event.target.closest('.task-section'); const taskText = taskDiv.querySelector('.main-task').textContent; // Buscar el índice correcto y eliminar la tarea const index = tasks.indexOf(taskText); if (index > -1) { tasks.splice(index, 1); // Elimina la tarea del array updateLocalStorage(); // Actualiza el localStorage } taskDiv.remove(); // Elimina el div del DOM } // Función para editar tareas function editTask(event) { const taskDiv = event.target.closest('.task-section'); const taskElement = taskDiv.querySelector('.main-task'); const oldTask = taskElement.textContent; const newTask = prompt('Ingresa el nuevo texto:', oldTask); if (newTask === null || newTask.trim() === '') { alert('Please enter a valid task.'); return; } const index = tasks.indexOf(oldTask); if (index > -1) { tasks[index] = newTask; // Actualiza la tarea en el array updateLocalStorage(); // Actualiza el localStorage } taskElement.textContent = newTask; // Actualiza el texto en el DOM } // Eventos para eliminar y editar tareas main.addEventListener('click', function (event) { if (event.target.classList.contains('delete')) { deleteTask(event); } else if (event.target.classList.contains('edit')) { editTask(event); } }); // Evento para agregar tareas taskButton.addEventListener('click', addTask); // Evento para cambiar el fondo changeBack.addEventListener('click', function () { body.classList.toggle('dark'); main.classList.toggle('darkDiv'); const theme = body.classList.contains('dark') ? "dark" : "light" localStorage.setItem('theme', theme); }); const currentTheme = localStorage.getItem("theme") if (currentTheme === "dark") { body.classList.add("dark"); main.classList.add("darkDiv"); } else { body.classList.remove("dark"); main.classList.remove("darkDiv"); } // Cargar las tareas cuando la página se carga loadTasks(); ```HTML: ```js <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-do-list</title> <link rel="stylesheet" href="styles.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> </head> <body id="body"> <button id="changeBackButton">Change Theme</button> <main id="main"> </main> </body> <script src="app.js"></script> </html> ``````js body { margin: 0; padding: 0; box-sizing: border-box; background-color: white; font-family: "Roboto", sans-serif; overflow: hidden; } #main { display: grid; place-items: center; height: 100vh; width: 100vw; } .main-div { background-color: whitesmoke; border-radius: 1px; width: 24vw; height: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .title-container { background-color: #e5e5e5; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: row; margin: 15px; height: 50px; border-radius: 4px; border: transparent; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .main-div h1 { font-size: 24px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; } .label-div { background-color: #e5e5e5; height: 50px; display: flex; justify-content: center; align-items: center; margin: 10px; border-radius: 5px; border: transparent; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .label-div input { width: 90%; margin: 10px; padding: 5px; border-radius: 5px; border: transparent; } .label-div button { background-color: dodgerblue; height: 25px; width: 100px; border-radius: 1px; border: transparent; margin: 5px; } .task-section { display: flex; justify-content: space-between; background-color: aliceblue; border-radius: 8px; border: transparent; margin: 10px; padding: 5px; align-items: center; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .main-task { margin: 10px; } .main-task p { font-size: 18px; } .other-functions { margin: 10px; display: flex; } .other-functions p { margin: 5px; } .other-functions p:nth-child(1) { color: red; } .other-functions p:nth-child(2) { color: aqua; } #changeBackButton { margin: 5px; padding: 15px; background-color: #495057; color: white; border-radius: 5px; border: transparent; } .dark { background-color: #343a40 !important; } .darkDiv { background-color: #495057 !important; } ```Y CSS

Una pregunta, ¿No sería más viable usar el ClasName en lugar del ClassList al agregar la clase dark en la última linea, ya que el clasname reemplaza a la clase existente en lugar de agregarla otra clase con el ClassList?, tengo ahi la duda