Cómo crear una lista "To Do" con HTML, CSS, JavaScript y Local Storage

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.

¿Qué es una lista "To Do"?

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.

Estructura del proyecto

Crea una nueva carpeta para tu proyecto y dentro de ella, crea los siguientes archivos:

todo-app/
├── index.html
├── styles.css
└── script.js

1. Crear el archivo HTML

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>

Explicación del HTML

<div class="container">: Contenedor para la interfaz de la lista de tareas.
<input>: Campo de entrada para que el usuario escriba una nueva tarea.
<button>: Botón para agregar la tarea a la lista.
<ul>: Lista desordenada donde se mostrarán las tareas.

2. Estilo con CSS

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;
}

Explicación del CSS

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.

3. Programar la lógica en JavaScript

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();

Explicación del JavaScript

Referencias del DOM: Se obtienen referencias a los elementos HTML.
Carga de Tareas: Se cargan las tareas desde el Local Storage o se inicializa un array vacío si no hay tareas guardadas.
Renderizar Tareas: Función que actualiza la lista de tareas en la interfaz.
Guardar Tareas: Se guardan las tareas en el Local Storage para preservarlas.
Agregar Nuevas Tareas: Se define la lógica para agregar una nueva tarea al hacer clic en el botón.

4. Probar la aplicación

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.

Conclusión

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!