Crear una lista de tareas o "To Do" es un ejercicio práctico excelente para aprender sobre el desarrollo web. En este artículo, aprenderás a construir una lista "To Do" utilizando HTML, CSS y JavaScript, y cómo almacenar tus tareas en el Local Storage del navegador para que no se pierdan al recargar la página.
Una lista "To Do" es una herramienta utilizada para gestionar tareas. Permite a los usuarios añadir, eliminar y marcar tareas como completadas. En el ámbito del desarrollo web, es un proyecto popular que combina varias habilidades de programación.
Crea una nueva carpeta para tu proyecto y dentro de ella, crea los siguientes archivos:
todo-app/ ├── index.html ├── styles.css └── script.js
Comencemos creando la estructura básica en el archivo index.html.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lista To Do</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Lista de Tareas</h1> <input type="text" id="task-input" placeholder="Agregar nueva tarea..."> <button id="add-task-button">Agregar</button> <ul id="task-list"></ul> </div> <script src="script.js"></script> </body> </html>
Ahora, vamos a darle estilo a nuestra aplicación en styles.css.
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #task-input { width: 70%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } #add-task-button { padding: 10px; background-color: #5cb85c; color: white; border: none; border-radius: 5px; cursor: pointer; } #add-task-button:hover { background-color: #4cae4c; } ul { list-style: none; padding: 0; } li { padding: 10px; border-bottom: 1px solid #ccc; } .completed { text-decoration: line-through; color: gray; }
El CSS se encargará de dar un aspecto limpio a nuestra aplicación, asegurando que sea fácil de usar. Los estilos incluyen configuraciones de márgenes, colores y tipografía.
Ahora, vamos a agregar la funcionalidad de nuestra aplicación en script.js.
// Obtener referencias a elementos del DOM const taskInput = document.getElementById("task-input"); const addTaskButton = document.getElementById("add-task-button"); const taskList = document.getElementById("task-list"); // Cargar tareas del Local Storage let tasks = JSON.parse(localStorage.getItem("tasks")) || []; // Función para actualizar la lista de tareas en el DOM function renderTasks() { taskList.innerHTML = ""; tasks.forEach((task, index) => { const li = document.createElement("li"); li.textContent = task.text; li.className = task.completed ? "completed" : ""; // Marcar tarea como completada al hacer click li.addEventListener("click", () => { task.completed = !task.completed; saveTasks(); renderTasks(); }); // Botón para eliminar tarea const deleteButton = document.createElement("button"); deleteButton.textContent = "Eliminar"; deleteButton.addEventListener("click", (e) => { e.stopPropagation(); // Evita que se marque como completado tasks.splice(index, 1); saveTasks(); renderTasks(); }); li.appendChild(deleteButton); taskList.appendChild(li); }); } // Guardar tareas en el Local Storage function saveTasks() { localStorage.setItem("tasks", JSON.stringify(tasks)); } // Agregar nueva tarea addTaskButton.addEventListener("click", () => { const taskText = taskInput.value.trim(); if (taskText) { tasks.push({ text: taskText, completed: false }); taskInput.value = ""; saveTasks(); renderTasks(); } }); // Renderizar tareas al cargar la página renderTasks();
Una vez que hayas seguido los pasos anteriores, abre index.html en tu navegador. Deberías poder añadir tareas, marcarlas como completadas, y eliminarlas. Las tareas permanecerán en el Local Storage, por lo que permanecerán incluso si actualizas la página o cierras el navegador.
Crear una lista "To Do" con HTML, CSS y JavaScript es un proyecto ideal para principiantes y una excelente forma de practicar. Este proyecto no solo mejora tus habilidades de programación, sino que también te proporciona una herramienta útil para organizarte.
Con esta guía, ya estás listo para comenzar a crear tus propias aplicaciones web y mejorar continuamente tus habilidades de desarrollo. ¡Feliz codificación!
Page loaded in 30.41 ms