Cómo crear una aplicación de tareas pendientes con JavaScript puro (y almacenamiento local)

() translation by (you can also view the original English article)

En este tutorial, mejoraremos nuestras habilidades en el front-end aprendiendo a crear una aplicación de tareas pendientes "hecha a mano". Para crearla no aprovecharemos ningún framework de JavaScript; solamente usaremos HTML, CSS y JavaScript puro.

Lo que vamos a construir

Este es un video introductorio que demuestra la funcionalidad de la aplicación JavaScript que vamos a crear. Los usuarios podrán agregar tareas, marcarlas como terminadas y eliminarlas. Los totales de las tareas y sus estados se mostrarán en la barra de estado:

Aquí está la demostración en Codepen para que la bifurques y juegues con ella:

Nota: este no es un tutorial introductorio. Este asume que estás familiarizado con habilidades esenciales del front-end como CSS Grid, flexbox, ES6, arreglos de JavaScript, etc. Además, para esta demostración, hacer que la aplicación sea totalmente accesible no es una prioridad.

1. Comienza con los recursos necesarios

Para que el diseño sea un poco más único, usaremos algunas ilustraciones SVG hechas a mano y una fuente personalizada tomada de Envato Elements.

Vale la pena señalar que la mayoría de estos recursos provendrán de un tutorial anterior. De hecho, también usaremos muchas de las técnicas de posicionamiento que aprendimos en este tutorial, así que vale la pena leerlo.

Formularios

Cómo crear un formulario SVG responsivo hecho a mano

George Martsoukos

How to Build a Responsive Handmade SVG Form

2. Continúa con el marcado de la página

Comenzaremos con un SVG y un contenedor div:

1	<svg style="display:none;">...</svg>
2	<div class="container">...</div>

Sprites de SVG

Como lo hemos hecho muchas veces en el pasado, y como una práctica recomendada, vamos a almacenar todos los SVGs como symbols en un contenedor de tipo sprite de SVG. Después, los desplegaremos en la pantalla cada vez que sea necesario llamando al elemento use.

Este es el marcado para el sprite de SVG:

<svg style="display:none;">
  <symbol id="input" viewBox="0 0 345.27 56.51" preserveAspectRatio="none">...</symbol>
  <symbol id="checkbox_empty" viewBox="0 0 33.18 33.34">...</symbol>
  <symbol id="checkmark" viewBox="0 0 37.92 33.3" preserveAspectRatio="none">...</symbol>
  <symbol id="button" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">...</symbol>
  <symbol id="close" viewBox="0 0 29.71 30.59">...</symbol>
  <symbol id="stats" viewBox="0 0 998.06 602.62" preserveAspectRatio="none">...</symbol>    
</svg>

Observa el atributo preserveAspectRatio="none" que adjuntamos a la mayoría de las ilustraciones. Hemos hecho esto porque, como veremos más adelante, nuestros iconos cambiarán de escala y perderán sus dimensiones iniciales.

Contenedor

El contenedor incluirá un formulario, un elemento div y una lista ordenada vacía:

<div class="container">
  <form class="todo-form">...</form>
  <div class="todo-stats">...</div>
  <ol class="todo-list"></ol>
</div>

Dentro del formulario, tendremos un campo de entrada y un botón de envío junto con sus SVGs asociados:

<form class="todo-form">
  <div class="form-wrapper">
    <input type="text" name="name" autofocus>
    <svg>
      <use xlink:href="#input"></use>      
    </svg>
  </div>
  <div class="form-wrapper">
    <button type="submit">Add new task</button>
    <svg>
      <use xlink:href="#button"></use>
    </svg>
  </div>
</form>

Observa el atributo name que hemos agregado al campo de entrada. Más adelante usaremos este atributo para acceder al valor de la entrada después del envío del formulario.

Nota: en nuestra demostración, el atributo autofocus del campo de texto no funcionará. De hecho mostrará el siguiente error, que puedes ver si abres la consola de tu navegador:

The cross-origin error due to the autofocus attribute

Sin embargo, si ejecutas esta aplicación localmente (no como un proyecto de Codepen), este problema no existirá. Alternativamente, puedes establecer el foco a través de JavaScript.

Dentro del div, colocaremos tres divs anidados y el SVG asociado. En esta sección llevaremos a cabo un seguimiento de la cantidad total de tareas (tanto restantes como terminadas):

<div class="todo-stats">
  <div class="total-tasks">
    Total Tasks: <span>0</span>
  </div>
  <div class="completed-tasks">
    Completed Tasks: <span>0</span>
  </div>
  <div class="remaining-tasks">
    Remaining Tasks: <span>0</span>
  </div>
  <svg>
    <use xlink:href="#stats"></use>
  </svg>
</div>

Finalmente, los elementos de la lista ordenada serán agregados de forma dinámica a través de JavaScript.

3. Define algunos estilos básicos

Con el marcado listo, continuaremos con algunos estilos de restablecimiento:

@font-face {
  font-family: "Summer";
  src: url(SummerFont-Regular.woff);
}
 
@font-face {
  font-family: "Summer Bold";
  src: url(SummerFont-Bold.woff);
}
 
:root {
  --white: #fff;
}
 
* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}
 
input,
button {
  font-family: inherit;
  font-size: 100%;
  background: none;
}
 
[type="checkbox"] {
  position: absolute;
  left: -9999px;
}
 
button,
label {
  cursor: pointer;
}
  
ol {
  list-style: none;
}
 
body {
  font: 28px/1.2 "Summer";
  margin: 1.5rem 0;
}

4. Establece los estilos principales

Ahora discutamos los estilos principales de nuestra aplicación.

Estilos del contenedor

El contenedor tendrá un ancho máximo, y el contenido estará centrado horizontalmente:

.container {
  max-width: 700px;
  padding: 0 10px;
  margin: 0 auto;
}

Estilos del formulario

En pantallas pequeñas, todos los elementos del formulario se apilarán:

Sin embargo, en las ventanas de 600 píxeles de ancho o más, el diseño del formulario cambiará de la siguiente manera:

The form layout on medium screens and above

Tomemos nota de dos cosas:

En las ventanas anchas, el tamaño del campo de entrada será el doble del tamaño del botón.
Los SVGs serán elementos con posiciones absolutas y se ubicarán debajo de sus controles adyacentes en el formulario. Nuevamente, para obtener una explicación más detallada, echa un vistazo a este tutorial anterior.

Estos son los estilos para esta sección:

/*CUSTOM VARIABLES HERE*/

.todo-form .form-wrapper {
  position: relative;
}

.todo-form input,
.todo-form button {
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 15px;
}

.todo-form svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.todo-form button {
  color: var(--white);
  text-transform: uppercase;
}

@media screen and (min-width: 600px) {
  .todo-form {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 5px;
  }
}

Estilos de las estadísticas

A continuación veamos la barra de estado, que nos dará un informe rápido sobre la cantidad total de tareas.

En pantallas pequeñas tendrá la siguiente apariencia apilada:

Sin embargo, en ventanas de 600 píxeles de ancho o más debería cambiar de la siguiente forma:

The stats layout on medium screens and above

Tomemos nota de dos cosas:

En las ventanas anchas, todos los elementos div hijos tendrán el mismo ancho.
De manera similar a los SVGs anteriores, este también tendrá una posición absoluta y actuará como una imagen de fondo que cubre toda la sección.

Los estilos relacionados:

/*CUSTOM VARIABLES HERE*/

.todo-stats {
  position: relative;
  text-align: center;
  padding: 5px 10px;
  margin: 10px 0;
  color: var(--white);
}

.todo-stats > div {
  position: relative;
  z-index: 1;
}

.todo-stats svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 600px) {  
  .todo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Estilos de las tareas

El diseño de las tareas, que generaremos de forma dinámica en la próxima sección, se verá de esta forma:

Cada tarea, que se representará por un li, tendrá dos partes.

En la primera parte verás una casilla de verificación junto con el nombre de la tarea. En la segunda parte verás un botón de eliminación para borrar la tarea.

Estos son los estilos relacionados:

.todo-list li {
  display: grid;
  align-items: baseline;
  grid-template-columns: auto 20px;
  grid-column-gap: 10px;
  padding: 0 10px;
}

.todo-list li + li {
  margin-top: 10px;
}

Cuando una tarea está incompleta, aparecerá una casilla de verificación vacía. Por otro lado, si una tarea está marcada como terminada, aparecerá una marca de verificación. De manera adicional, su nombre adquirirá una opacidad del 50% además de una línea atravesándolo.

Estos son los estilos responsables de este comportamiento:

.todo-list .checkbox-wrapper {
  display: flex;
  align-items: baseline;
}

.todo-list .checkbox-wrapper label {
  display: grid;
  margin-right: 10px;
}

.todo-list .checkbox-wrapper svg {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
}

.todo-list .checkbox-wrapper .checkmark {
  display: none;
}

.todo-list [type="checkbox"]:checked + label .checkmark {
  display: block;
}

.todo-list [type="checkbox"]:checked ~ span {
  text-decoration: line-through;
  opacity: 0.5;
}

Finalmente, a continuación puedes ver los estilos del botón para eliminar:

.todo-list .remove-task {
  display: flex;
  padding: 2px;
}

.todo-list .remove-task svg {
  width: 16px;
  height: 16px;
}

5. Agrega el código JavaScript

En este punto, estamos listos para crear la funcionalidad principal de nuestra aplicación. ¡Hagámoslo!

Al enviar el formulario

Cada vez que un usuario envíe el formulario, ya sea presionando la tecla Enter o el botón Submit (Enviar), haremos lo siguiente:

Detendremos el envío del formulario, para evitar así una recarga de la página.
Tomaremos el valor contenido en el campo de entrada.
Suponiendo que el campo de entrada no está vacío, crearemos un nuevo literal de objeto que representará a la tarea. Cada tarea tendrá un id único, un nombre, y estará activa (no terminada) de forma predeterminada.
Agregaremos esta tarea al arreglo tasks.
Guardaremos el arreglo en el almacenamiento local. El almacenamiento local solamente admite cadenas, por lo que, para hacer eso, tenemos que usar el método JSON.stringify() para convertir los objetos del interior del arreglo en cadenas.
Llamaremos a la función createTask() para representar visualmente la tarea en la pantalla.
Limpiaremos el formulario.
Asignaremos el foco al campo de entrada.

Este es el código correspondiente:

const todoForm = document.querySelector(".todo-form");
let tasks = [];

todoForm.addEventListener("submit", function(e) {
  // 1
  e.preventDefault();
  // 2
  const input = this.name;
  const inputValue = input.value;
  
  if (inputValue != "") {
    // 3
    const task = {
      id: new Date().getTime(),
      name: inputValue,
      isCompleted: false
    };
    // 4
    tasks.push(task);
    // 5
    localStorage.setItem("tasks", JSON.stringify(tasks));
    // 6
    createTask(task);
    // 7
    todoForm.reset();
  }
  // 8
  input.focus();
}); 

Crea una tarea

La función createTask() será responsable de la creación del marcado de la tarea.

Por ejemplo, esta es la estructura de la tarea "Salir a caminar":

Aquí hay dos cosas importantes:

Si la tarea ha sido terminada, aparecerá la marca de verificación.
Si la tarea no ha sido terminada, su elemento span recibirá el atributo contenteditable. Este atributo nos dará la posibilidad de editar o actualizar su nombre.

A continuación se muestra la sintaxis de esta función:

function createTask(task) {
  const taskEl = document.createElement("li");
  taskEl.setAttribute("id", task.id);
  const taskElMarkup = `
    <div class="checkbox-wrapper">
      <input type="checkbox" id="${task.name}-${task.id}" name="tasks" ${
    task.isCompleted ? "checked" : ""
  }>
      <label for="${task.name}-${task.id}">
        <svg class="checkbox-empty">
          <use xlink:href="#checkbox_empty"></use>
        </svg>
        <svg class="checkmark">
          <use xlink:href="#checkmark"></use>
        </svg>
      </label>
      <span ${!task.isCompleted ? "contenteditable" : ""}>${task.name}</span>
    </div>
    <button class="remove-task" title="Remove ${task.name} task">
      <svg>
        <use xlink:href="#close"></use>
      </svg>
    </button>
  `;
  taskEl.innerHTML = taskElMarkup;
  todoList.appendChild(taskEl);
  countTasks();
}

Actualiza una tarea

Una tarea puede actualizarse de dos formas diferentes:

Cambiando su estado de "no terminada" a "terminada" y viceversa.
Modificando su nombre en caso de que la tarea no haya sido terminada. Recuerda que, en este caso, el elemento span tiene el atributo contenteditable.

Para hacer un seguimiento de estos cambios aprovecharemos el evento input. Este es un evento aceptable para nosotros, ya que se aplica tanto a los elementos input como a los elementos con contenteditable habilitado.

Lo complicado es que no podemos adjuntar este evento directamente a los elementos destino (casilla de verificación, span), porque se crean de forma dinámica y no son parte del DOM al cargar la página.

Gracias a la delegación de eventos, adjuntaremos el evento input a la lista padre, que es parte del marcado inicial. Después, a través de la propiedad target de ese evento, revisaremos los elementos en los que ocurrió el evento y llamaremos a la función updateTask():

1	todoList.addEventListener("input", (e) => {
2	const taskId = e.target.closest("li").id;
3	updateTask(taskId, e.target);
4	});

Dentro de la función updateTask() haremos lo siguiente:

Tomaremos la tarea que necesita actualizarse.
Revisaremos el elemento que desencadenó el evento. Si el elemento tiene el atributo contenteditable (es decir, es el elemento span), estableceremos el nombre de la tarea para que sea igual al contenido de texto de span.
De lo contrario (es decir, se trata de la casilla de verificación), cambiaremos el estado de la tarea y su atributo checked. Además, también cambiaremos el atributo contenteditable del span adyacente.
Actualizaremos el valor de la clave tasks en el almacenamiento local.
Llamaremos a la función countTasks().

A continuación puedes ver la sintaxis de esta función:

function updateTask(taskId, el) {
  // 1
  const task = tasks.find((task) => task.id === parseInt(taskId));

  if (el.hasAttribute("contentEditable")) {
    // 2
    task.name = el.textContent;
  } else {
    // 3
    const span = el.nextElementSibling.nextElementSibling;
    task.isCompleted = !task.isCompleted;
    if (task.isCompleted) {
      span.removeAttribute("contenteditable");
      el.setAttribute("checked", "");
    } else {
      el.removeAttribute("checked");
      span.setAttribute("contenteditable", "");
    }
  }
  // 4
  localStorage.setItem("tasks", JSON.stringify(tasks));
  // 5
  countTasks();
}

Elimina una tarea

Podemos eliminar una tarea a través del botón "cerrar".

De manera similar a la operación de actualización, no podemos adjuntar un evento directamente a este botón, ya que no se encuentra en el DOM al cargar la página.

Gracias a la delegación de eventos de nuevo, adjuntaremos un evento click a la lista padre y llevaremos a cabo las siguientes acciones:

Revisaremos si el elemento al que se le hizo clic es el botón "cerrar" o su SVG hijo.
Si eso ocurre, obtendremos el id del elemento de la lista padre.
Enviaremos este id a la función removeTask().

Este es el código correspondiente:

const todoList = document.querySelector(".todo-list");

todoList.addEventListener("click", (e) => {
  // 1
  if (
    e.target.classList.contains("remove-task") ||
    e.target.parentElement.classList.contains("remove-task")
  ) {
    // 2
    const taskId = e.target.closest("li").id;
    // 3
    removeTask(taskId);
  }
});

Dentro de la función removeTask() haremos lo siguiente:

Eliminaremos la tarea asociada del arreglo tasks.
Actualizaremos el valor de la clave tasks en el almacenamiento local.
Eliminaremos el elemento asociado de la lista.
Llamaremos a la función countTasks().

Aquí puedes ver la sintaxis de esta función:

function removeTask(taskId) {
  // 1
  tasks = tasks.filter((task) => task.id !== parseInt(taskId));
  // 2
  localStorage.setItem("tasks", JSON.stringify(tasks));
  // 3
  document.getElementById(taskId).remove();
  // 4
  countTasks();
}

Cuenta las tareas

Como ya hemos discutido, muchas de las funciones anteriores incluyen a la función countTask().

Su trabajo es monitorear las tareas en busca de cambios (adiciones, actualizaciones, eliminaciones) y actualizar el contenido de los elementos relacionados.

Esta es su firma:

const totalTasks = document.querySelector(".total-tasks span");
const completedTasks = document.querySelector(".completed-tasks span");
const remainingTasks = document.querySelector(".remaining-tasks span");

function countTasks() {
  totalTasks.textContent = tasks.length;
  const completedTasksArray = tasks.filter((task) => task.isCompleted === true);
  completedTasks.textContent = completedTasksArray.length;
  remainingTasks.textContent = tasks.length - completedTasksArray.length;
}

Evita la adición de líneas nuevas

Cada vez que un usuario actualice el nombre de una tarea, no debería poder crear líneas nuevas presionando la tecla Enter.

Para deshabilitar esta funcionalidad, una vez más aprovecharemos la delegación de eventos y adjuntaremos el evento keydown a la lista, de esta forma:

todoList.addEventListener("keydown", function (e) {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
});

Observa que, en este escenario, solamente los elementos span podrían desencadenar ese evento, por lo que no hay necesidad de realizar una verificación adicional de esta manera:

1	if (e.target.hasAttribute("contenteditable") && e.keyCode === 13) {
2	e.preventDefault();
3	}

Conserva los datos al cargar la página

Hasta ahora, si cerramos el navegador y nos dirigimos al proyecto de demostración, nuestras tareas desaparecerán.

Pero espera, ¡eso no es 100% cierto! Recuerda que cada vez que manipulamos una tarea, también almacenamos el arreglo tasks en el almacenamiento local. Por ejemplo, en Chrome, para ver las claves y valores del almacenamiento local haz clic en la pestaña Application (Aplicación), luego expande el menú Local Storage (Almacenamiento local) y, finalmente, haz clic en un dominio para ver sus pares de clave y valor.

En mi caso, estos son los valores para la clave tasks:

Entonces, para mostrar estas tareas primero necesitamos recuperarlas del almacenamiento local. Para hacer esto usaremos el método JSON.parse(), que convertirá las cadenas de vuelta a objetos de JavaScript.

A continuación almacenaremos todas las tareas en el familiar arreglo tasks. Ten en cuenta que, si no hay datos en el almacenamiento local (por ejemplo, al visitar la aplicación por primera vez), este arreglo está vacío. Después tenemos qué recorrer el arreglo y, por cada tarea, debemos llamar a la función createTask(). ¡Y eso es todo!

El fragmento de código correspondiente:

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

if (localStorage.getItem("tasks")) {
  tasks.map((task) => {
    createTask(task);
  });
}

Conclusión

¡Uf! Gracias por seguir los pasos en este largo viaje, amigos. Con suerte, hoy has adquirido nuevos conocimientos que podrás aplicar a tus propios proyectos.

Recordemos lo que hemos creado:

Sin duda, crear una aplicación así con un framework de JavaScript podría ser más estable, sencillo y eficiente (volver a pintar el DOM es caro). Sin embargo, saber resolver este tipo de ejercicio con JavaScript puro te ayudará a obtener una comprensión sólida de sus fundamentos y te convertirá en un mejor desarrollador de JavaScript.

Antes de terminar, permíteme proponer dos ideas para extender este ejercicio:

Usa la API HTML para arrastrar y soltar o una biblioteca de JavaScript como Sortable.js para reordenar las tareas.
Almacena los datos (las tareas) en la nube en vez de hacerlo en el navegador. Por ejemplo, sustituye el almacenamiento local con una base de datos en tiempo real como Firebase.

Como siempre, ¡muchas gracias por leer!

Más aplicaciones con JavaScript puro

Si deseas aprender a crear pequeñas aplicaciones con JavaScript puro, consulta los siguientes tutoriales: