Crear una Lista de Tareas con JavaScript y Local Storage
En este artículo, aprenderemos a construir una lista de tareas utilizando HTML básico, CSS y JavaScript, aprovechando el almacenamiento local (local storage) para guardar las tareas en la aplicación.
Qué es el Almacenamiento Local
El objeto localStorage
permite almacenar pares de clave-valor en el navegador de manera persistente, sin fecha de caducidad. Esto significa que los datos almacenados permanecen incluso después de cerrar el navegador o reiniciar la computadora, con un límite de aproximadamente 5 MB en la mayoría de los navegadores.
Proyecto: Construyendo la Aplicación
Paso 1 — Crear un Archivo HTML (index.html)
Todo App
To-Do List
Paso 2 — Crear un Archivo CSS (style.css)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* Estilos omitidos para brevedad */
Paso 3 — Crear un Archivo JavaScript (script.js)
const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");
function addTask() {
if (inputBox.value == "") {
alert("Debes escribir algo.");
} else {
let li = document.createElement('li');
li.innerHTML = inputBox.value;
listContainer.appendChild(li);
let img = document.createElement('img');
img.src = "img/notcheck.png";
img.classList.add("close");
li.appendChild(img);
}
inputBox.value = "";
saveData();
}
listContainer.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
e.target.classList.toggle("checked");
saveData();
} else if (e.target.tagName === 'IMG') {
e.target.parentElement.remove();
saveData();
}
});
function saveData() {
localStorage.setItem("data", listContainer.innerHTML);
}
function showList() {
listContainer.innerHTML = localStorage.getItem("data");
}
showList();
Resumen
En este proyecto, hemos creado una aplicación simple de lista de tareas usando HTML para la estructura, CSS para los estilos y JavaScript para la funcionalidad. Utilizamos localStorage
para almacenar y recuperar las tareas del usuario de manera persistente, permitiendo agregar, marcar como completadas y eliminar tareas de la lista. Esta aplicación básica demuestra cómo aprovechar el poder del DOM en JavaScript y el almacenamiento local para crear aplicaciones web interactivas y útiles.