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)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="todo-app">
<div class="title">
<h2>To-Do List</h2>
<img decoding="async" class="logo" src="img/logo.png">
</div>
<div class="row">
<input type="text" id="input-box" placeholder="Agregar tarea">
<button onclick="addTask()">Agregar</button>
</div>
<ul id="list-container" class="scroll">
<!-- Aquí se añadirán las tareas -->
</ul>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
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.
