DOMINA OPERACIONES CRUD EN JAVASCRIPT CON UNA LISTA DE TAREAS
Dominando las operaciones CRUD en JavaScript para aplicaciones web eficientes
En el desarrollo web, las operaciones CRUD en JavaScript son esenciales para manipular datos y construir aplicaciones dinámicas. CRUD, acrónimo de Crear, Leer, Actualizar y Eliminar, representa las acciones básicas que permiten interactuar con la información almacenada, ya sea en bases de datos o estructuras de datos en memoria.
Implementar estas operaciones correctamente es fundamental para crear aplicaciones robustas y escalables. En este artículo, exploraremos cómo construir una lista de tareas utilizando JavaScript, aplicando las operaciones CRUD para gestionar eficazmente los elementos de la lista.
Construcción de una lista de tareas con HTML, CSS y JavaScript
Para comenzar, es necesario establecer la estructura básica de la aplicación con HTML y CSS, que servirá como base para la interacción con JavaScript.
El siguiente código HTML define un formulario para agregar tareas y una lista donde se mostrarán:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Lista de tareas</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Lista de tareas</h1>
<form id="task-form">
<input
type="text"
id="new-task"
placeholder="Agregar tarea..."
required
/>
<button type="submit">Agregar</button>
</form>
<ul id="tasks"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
El estilo CSS básico para esta estructura puede ser el siguiente:
.container {
max-width: 700px;
margin: 0 auto;
padding: 20px;
border: 1px solid #000;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
form {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
margin-right: 10px;
}
button {
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
background-color: #000;
color: #fff;
cursor: pointer;
}
Implementación de las operaciones CRUD en JavaScript
Para gestionar la lista de tareas, utilizaremos un array que almacenará objetos representando cada tarea. Cada objeto contendrá propiedades como el texto de la tarea y su estado de completado.
const tasks = [];
Crear y mostrar tareas
Escuchamos el evento de envío del formulario para agregar nuevas tareas:
const form = document.getElementById("task-form");
const taskList = document.getElementById("tasks");
form.addEventListener("submit", function (e) {
e.preventDefault();
addTask();
form.reset();
});
function addTask() {
const taskInput = document.getElementById("new-task");
const taskText = taskInput.value.trim();
if (taskText === "") return;
const task = { text: taskText, completed: false };
tasks.push(task);
renderTasks();
}
La función renderTasks actualiza la visualización de la lista, mostrando cada tarea con opciones para actualizar y eliminar:
function renderTasks() {
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.textContent = task.text;
li.style.textDecoration = task.completed ? "line-through" : "none";
// Botón para marcar como completada
const toggleBtn = document.createElement("button");
toggleBtn.textContent = task.completed ? "Desmarcar" : "Completar";
toggleBtn.addEventListener("click", () => {
tasks[index].completed = !tasks[index].completed;
renderTasks();
});
// Botón para editar tarea
const editBtn = document.createElement("button");
editBtn.textContent = "Editar";
editBtn.addEventListener("click", () => {
editTask(index);
});
// Botón para eliminar tarea
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Eliminar";
deleteBtn.addEventListener("click", () => {
deleteTask(index);
});
li.appendChild(toggleBtn);
li.appendChild(editBtn);
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
Actualizar tareas
La función para editar una tarea permite modificar el texto existente:
function editTask(index) {
const newText = prompt("Editar tarea:", tasks[index].text);
if (newText !== null && newText.trim() !== "") {
tasks[index].text = newText.trim();
renderTasks();
}
}
Eliminar tareas
Para eliminar una tarea, simplemente removemos el elemento del array y actualizamos la lista:
function deleteTask(index) {
tasks.splice(index, 1);
renderTasks();
}
Almacenamiento local para persistencia de datos
Para que las tareas persistan entre sesiones, podemos utilizar localStorage para guardar y cargar la lista de tareas en formato JSON.
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function loadTasks() {
const storedTasks = localStorage.getItem("tasks");
if (storedTasks) {
const parsedTasks = JSON.parse(storedTasks);
tasks.length = 0;
tasks.push(...parsedTasks);
renderTasks();
}
}
// Modificar funciones para guardar después de cada cambio
function addTask() {
const taskInput = document.getElementById("new-task");
const taskText = taskInput.value.trim();
if (taskText === "") return;
const task = { text: taskText, completed: false };
tasks.push(task);
saveTasks();
renderTasks();
}
function editTask(index) {
const newText = prompt("Editar tarea:", tasks[index].text);
if (newText !== null && newText.trim() !== "") {
tasks[index].text = newText.trim();
saveTasks();
renderTasks();
}
}
function deleteTask(index) {
tasks.splice(index, 1);
saveTasks();
renderTasks();
}
function toggleComplete(index) {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
}
// Actualizar el botón completar para usar toggleComplete
// En renderTasks, reemplazar toggleBtn event listener con:
toggleBtn.addEventListener("click", () => {
toggleComplete(index);
});
Finalmente, cargamos las tareas almacenadas al iniciar la aplicación:
loadTasks();
Conclusiones
Implementar una lista de tareas con operaciones CRUD en JavaScript es un excelente ejercicio para comprender la manipulación dinámica de datos en aplicaciones web. A través de la creación, lectura, actualización y eliminación de tareas, se adquieren habilidades fundamentales para el desarrollo frontend.
El uso de localStorage para persistir datos mejora la experiencia del usuario al mantener la información entre sesiones sin necesidad de un backend. Además, la modularidad del código facilita futuras ampliaciones, como la integración con bases de datos o frameworks modernos.
Dominar estas técnicas permite construir aplicaciones web más interactivas, eficientes y profesionales, sentando las bases para proyectos más complejos y escalables en el ámbito del desarrollo web.
