Creación de un Task Manager con Persistencia usando Local Storage

Clase 20 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Cómo construir un Task Manager en JavaScript?

La construcción de un Task Manager o To-Do List en JavaScript no es solo una introducción a la manipulación del DOM, sino también una práctica valiosa para entender la persistencia de datos. La clave es crear una aplicación sencilla que permita cambiar temas, añadir, modificar y eliminar tareas. Aunque el diseño es básico, su funcionalidad es enriquecedora y didáctica.

¿Cómo implementar el tema de tu Task Manager?

Para mejorar la experiencia del usuario, nuestra aplicación permite cambiar de tema. Este proceso implica un botón que aplicará diferentes estilos CSS almacenados en un archivo independiente. Así, puedes ofrecer una interfaz personalizada que mejore la interacción visual.

¿Cómo agregar tareas de manera eficaz?

Agregar tareas es esencial en cualquier Task Manager. Para implementar esta funcionalidad:

Formulario en HTML: Disponemos de un pequeño formulario en HTML donde el usuario ingresa la tarea.
Escuchar el evento de envío: Utilizamos addEventListener para captar el submit del formulario y extraer el texto contenido en el input.
Estructuración de funciones:
- Una función para manejar el evento de envío y extraer el valor.
- Otra para crear elementos de la lista en JavaScript.
- Una más para generar los botones necesarios para cada tarea.

Este enfoque modular permite que el código sea más organizado y escalable.

const taskForm = document.getElementById('idDelFormulario');
const taskList = document.getElementById('idDeLaListaDeTareas');

taskForm.addEventListener('submit', function(evento) {
    evento.preventDefault();
    const taskInput = document.getElementById('idDelInput');
    const task = taskInput.value;
    // Lógica para agregar la tarea a la lista
});

¿Cómo lograr la persistencia de datos?

Para garantizar que las tareas y las preferencias de tema se mantengan tras refrescar la página, utilizamos la API de almacenamiento web conocida como Local Storage. Este método guarda los datos localmente en el navegador, asegurando que las modificaciones se conserven entre sesiones.

Almacenar Datos: Cuando se agrega o modifica una tarea, el estado actual se guarda en el Local Storage.
Recuperación de Datos: Al recargar la página, se extraen los datos del Local Storage para restaurar el estado previo de la aplicación.

¿Qué debemos tener en cuenta al manejar el DOM en JavaScript?

Manipular el DOM es clave en proyectos como un Task Manager. Aquí algunos consejos prácticos:

Selección de Elementos: Usa getElementById o querySelector para seleccionar y manipular elementos del DOM de manera eficiente.
Crear Elementos Dinámicamente: Emplea JavaScript para añadir elementos li a la lista de tareas, permitiendo flexibilidad.
Eventos: Capturar eventos como clics o envíos de formularios te permitirá reaccionar dinámicamente.

Con estos conocimientos y herramientas, estás bien equipado para perfeccionar tus habilidades de JavaScript desarrollando aplicaciones prácticas y funcionales. ¡Adelante, aprende y disfruta del proceso creativo de la programación!

Andrés Ortega

student•

Por si desean una vista más estética:

Estilos:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: background-color 0.3s, color 0.3s;
}

.main-box {
  width: 90%;
  max-width: 600px;
  padding: 1.5rem;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: relative;
  transition: background 0.3s, box-shadow 0.3s;
}

.box {
  margin: 1rem 0;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
  transition: background 0.3s;
}

h1 {
  font-size: 2rem;
  color: #333;
  margin: 0;
}

.box button {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.add-btn {
  background-color: #007bff;
  color: #ffffff;
}

.add-btn:hover {
  background-color: #0056b3;
}

.add-btn:focus {
  outline: none;
}

.toggle-button {
  background-color: #6c757d5e;
  color: #ffffff;
}

.toggle-button:hover {
  background-color: #5a626882;
}

.toggle-button:focus {
  outline: none;
}

.box .toggle-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

#task-form {
  display: flex;
  gap: 0.5rem;
}

#task-input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

#task-input:focus {
  border-color: #007bff;
  outline: none;
}

#task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-item {
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0.75rem;
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-options {
  display: flex;
  gap: 10px;
  color: #007bff;
  cursor: pointer;
}

.task-options span:hover {
  text-decoration: underline;
}

/* Dark mode */
body.dark-mode {
  background-color: #2c2c2c;
  color: #e0e0e0;
}

body.dark-mode .main-box {
  background: #333333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .box {
  background: #333333;
}

body.dark-mode h1 {
  color: #e0e0e0;
}

body.dark-mode .add-btn {
  background-color: #007bff;
  color: #ffffff;
}

body.dark-mode .add-btn:hover {
  background-color: #0056b3;
}

body.dark-mode .toggle-button {
  background-color: #5a6268;
}

body.dark-mode .toggle-button:hover {
  background-color: #6c757dc0;
}

body.dark-mode #task-input {
  border: 1px solid #555;
  background: #666;
  color: #e0e0e0;
}

body.dark-mode #task-input:focus {
  border-color: #007bff;
}

body.dark-mode .task-item {
  background: #555555;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .task-options {
  color: #007bff;
}

body.dark-mode .task-options span:hover {
  text-decoration: underline;
}

JulianFranchesco rp

student•

gracias pero no es una clase de diseño.

Aloy Foxy

student•

A nadie le importa que no sea una clase de diseño, de todo se aprende y el diseño es muy importante a la hora de crear una aplicación.

Natalia Gallego Heras

student•

Vale 🫡 En caso de que alguien más se perdiera buscando los recursos:

A día de hoy, en lecturas recomendadas está esté enlace (https://github.com/platzi/javascript-dom/) y por ahora la carpeta que guarda el punto en el que estamos es Poject (asumimos que un typo de Project).
La clase de "Añadir tareas desde un formulario" (esta clase) está (como es normal) en la carpeta AddTasks.
Abrimos en nuestro Visual Studio Code los tres archivos (html, css y js) que hay dentro y nos aseguramos de que tengan los mismos nombres para que queden bien referenciados.
Clicamos con el botón derecho sobre el archivo html y selecionamos "Open with Live Server"
En su defecto, abrimos el archvio html con Google Chrome o lo que usemos.

Ysabella Navas

student•

Mi proyectito:

Jimmy Alexander Tejedor Romero

student•

Aquí mi UI, jaja no es el mejor pero me gusta por lo minimalista:

Leonardo Garrido

student•

si no hay un todoList no es un buen curso de js

Juan Montalvo

student•

Por alguna razón las clases se cortan, ya que no muestra como se cran los elementos nuevos para añadir las tareas a la lista

Natalia Gallego Heras

student•

Dejo el código hasta donde lo ha dejado el profesor por si era lo que alguien buscaba al abrir el recurso app.js y se encontró con el ejercicio terminado y sin resaltado:

const taskForm = document.getElementById("task-form")
const taskList = document.getElementById("task-list")

taskForm.addEventListener('submit', (event) => {
  event.preventDefault()
  const taskInput = document.getElementById("task-input")
  const task = taskInput.value
  console.log(task)
})

Tomas Arriola

student•

Les comparto el html y css para que puedan ahorrarse ir a buscarlo al repositorio. HTML <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Task Manager</title> <link rel="stylesheet" href="style.css"></head> <body> <div id="theme-toggle"> <button id="toggle-theme-btn">Toggle Theme</button> </div> <div id="task-manager"> <h2>Task Manager</h2> <form id="task-form"> <input type="text" id="task-input" placeholder="Enter a new task" required> <button type="submit">Add Task</button> </form> <ul id="task-list"> <li> Task Content <span class="delete-btn">❌</span> <span class="edit-btn">✏️</span> </li> </ul> </div> <script src="app.js"></script></body> </html>

CSS body { font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 10px; margin: 0; } #task-manager { background: #fff; padding: 20px; margin: auto; width: 80%; max-width: 600px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #task-form { margin-bottom: 20px; } #task-input { padding: 10px; width: 70%; margin-right: 10px; } #task-list { list-style-type: none; padding: 0; } #task-list li { background: #eee; padding: 10px; margin-bottom: 5px; border-radius: 5px; } /* Dark theme styles */ body.dark-theme { background-color: #333; color: #fff; } .dark-theme #task-manager { background: #222; color: #fff; } .dark-theme #task-list li { background: #444; }

Alejandro Torres

student•

esta la clase incompleta no?

Calvin Rafael Bobadilla Fernandez

student•

Asi voy hasta ahora! He de decir, que logre hacer tanto el html como el css por mi cuenta. En javascript logre hacer por mi cuenta, tanto el anadir, como eliminar y editar tareas. Pero para que se queden guardadas en localstorage, tuve que recurir a mi compa el gpt (Digo esto por si no pueden lograr x cosa, recurrir a ayudas es competamente normal, no te preocupes, mientras avances hasta donde tu puedas). Exitos a todos!

Calvin Rafael Bobadilla Fernandez

student•

Ignoren las tareas random, estaba en modo testing y puse tareas a lo loco🗿🗿

Diego Colín

student•

Nice

Daniel Lopez

student•

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    
    <div id="theme-toggle">
        <button id="toggle-theme-btn">Toggle</button>
    </div>

    <h2>To-Do</h2>
    <div id="task-manager">
        <form id="task-form">
            <input type="text" id="task-input" placeholder="Add a task" required>
            <button type="submit">Add</button>
        </form>
    
    
        <ul id="task-list">
            <li>
                Task content
                <span class="delete-btn">Delete</span>
                <span class="edit-btn">Edit</span>
            </li>
        </ul>
    </div>
</body>
</html>
```\<!DOCTYPE html>\<html lang="en">\<head>    \<meta charset="UTF-8">    \<meta name="viewport" content="width=device-width, initial-scale=1.0">    \<title>Document\</title>    \<link rel="stylesheet" href="style.css">    \<script src="script.js" defer>\</script>\</head>\<body>        \<div id="theme-toggle">        \<button id="toggle-theme-btn">Toggle\</button>    \</div>
    \<h2>To-Do\</h2>    \<div id="task-manager">        \<form id="task-form">            \<input type="text" id="task-input" placeholder="Add a task" required>            \<button type="submit">Add\</button>        \</form>                \<ul id="task-list">            \<li>                Task content                \<span class="delete-btn">Delete\</span>                \<span class="edit-btn">Edit\</span>            \</li>        \</ul>    \</div>\</body>\</html>

Platzi Team

student•

Mi UI ;)

Jeison Gomez

student•

Creo que esta clase esta cortada, ya que cuando voy a la siguiente clase, el codigo va mucho mas avanzado de cuando termino esta.

Juan Manuel Rojas Rojas

student•

Buenas tardes.

Este es mi diseño.

Jennifer Yanez Jiménez

student•

Así va quedando mi diseño :)

Any Omaña

student•

Así personalicé mi proyecto, a partir de aquí comenzaré a crear todo lo que sea necesario para que funcione 💗

Por acá el enlace a mi repo de Github: https://github.com/iamanyyeei/ToDo-List---Manipulacion-del-DOM

Any Omaña

student•

Sentí que algo le faltaba a este diseño, así que para empezar con mi mente en paz lo rediseñé nuevamente. Creo que se ve más limpio y sencillo así:

Aquí les dejo el enlace al código por si quieren trabajar con este diseño <3

https://github.com/iamanyyeei/ToDo-List---Manipulacion-del-DOM Porfis si lo hacen me dejan una estrellita 🥺🥺

Marco Pacheco

student•

aqui mi ui.

Francisco Zuñiga

student•

En la clase se abordaron los siguientes conceptos clave:

Administración de tareas: Crear un To-Do List que permite agregar, editar y eliminar tareas.
- Ejemplo: Un usuario puede añadir "Comprar leche" y luego eliminarla una vez completada.
Uso de formularios: Captura de datos a través de un formulario HTML.
- Ejemplo: Un campo de texto donde el usuario escribe su tarea y un botón para agregarla.
Manejo de eventos: Implementación de eventos como el "submit" para procesar la entrada del formulario.
- Ejemplo: Al presionar "Enter", se agrega la tarea a la lista sin recargar la página.
Local Storage: Almacenamiento de datos para mantener la persistencia de las tareas.
- Ejemplo: Las tareas persisten incluso después de cerrar y abrir el navegador.

Estos conceptos son fundamentales para desarrollar aplicaciones web interactivas.

marco contreras

student•

podria explicarse lo que falto de la clase, la de crear las tareas, junto al agregar lso iconos despues, no me he muy justo leer el codigo en el repositorio y que no te lo expliquen :(

Héctor Galindo

student•

Esta fue mi implementación

----------------

function getElement(*selector*) {  return document.querySelector(*selector*)}
const taskForm = getElement("#task-form");const taskList = getElement("#task-list")
function createElement(*element*, *clases*, *id* = null) {  const result = document.createElement(*element*);  if (*Array*.isArray(*clases*)) {    *clases*.forEach(*clase* => result.classList.add(*clase*))  } else {    result.classList.add(*clases*);  }  !*id* ? null : result.setAttribute("id", *id*);  return result;}
function addTask(*title*) {  const task = createElement("li", "flex");  const taskTitle = createElement("span", "task-title");  taskTitle.textContent = *title*;  const taskOptions = createElement("div", "task-options");  const deleteBtn = createElement("span", \["delete-btn", "cpointer"]);  deleteBtn.innerText = "🗑️";  const editBtn = createElement("span", \["edit-btn", "cpointer"]);  editBtn.innerText = "✏️";  taskOptions.append(deleteBtn, editBtn);  task.append(taskTitle, taskOptions);  taskList.append(task);  const taskInput = getElement("#task-input");  taskInput.value = "";}
taskForm.addEventListener("submit", (*event*) => {  *event*.preventDefault();
&#x20; const taskInput = getElement("#task-input")  const taskTitle = taskInput.value;  addTask(taskTitle)})

Héctor Galindo

student•

Oh, no quedó formateado y no deja eliminar. Anyway, ahí está.