Apuntes sobre Javascript

JavaScript lo resuelve todo... eventualmente.

Proyecto Final: Creando una Aplicación Simple

Ahora es el momento de unir todo en un proyecto final: una aplicación de lista de tareas interactiva. Esta app te permitirá añadir, marcar como completadas y eliminar tareas, con la opción de simular guardarlas en un servidor (como si fuera una base de datos en PHP). Es una forma práctica de aplicar lo aprendido y ver cómo JavaScript brilla en la web.

¿Qué vamos a construir?

Crearemos una lista de tareas con las siguientes características:

  • Añadir nuevas tareas desde un formulario.
  • Marcar tareas como completadas (con un cambio visual).
  • Eliminar tareas.
  • Simular guardar las tareas en un "servidor" usando programación asíncrona (como si enviaras datos a una base de datos en PHP).
  • Mostrar mensajes de estado (por ejemplo, "Cargando..." o "Error").

Código del Proyecto

Vamos a construir la aplicación paso a paso. Aquí está el código completo, seguido de una explicación detallada.

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Lista de Tareas</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
    .tarea { padding: 10px; margin: 5px 0; background: #f9f9f9; }
    .completada { text-decoration: line-through; background: #d0ffd0; }
    .error { color: red; }
    .success { color: green; }
  </style>
</head>
<body>
  <h1>Mi Lista de Tareas</h1>
  <form id="formulario">
    <input type="text" id="nueva-tarea" placeholder="Escribe una tarea">
    <button type="submit">Añadir</button>
  </form>
  <p id="mensaje"></p>
  <ul id="lista-tareas"></ul>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// Seleccionar elementos del DOM
const formulario = document.getElementById("formulario");
const inputTarea = document.getElementById("nueva-tarea");
const listaTareas = document.getElementById("lista-tareas");
const mensaje = document.getElementById("mensaje");

// Array para almacenar tareas
let tareas = [];

// Función para simular guardar en un servidor
function guardarTareaEnServidor(tarea) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let exito = Math.random() > 0.2; // 80% de probabilidad de éxito
      if (exito) {
        resolve("Tarea guardada");
      } else {
        reject("Error al guardar la tarea");
      }
    }, 1000); // Simula 1 segundo de espera
  });
}

// Función para mostrar mensajes
function mostrarMensaje(texto, tipo) {
  mensaje.textContent = texto;
  mensaje.className = tipo;
  setTimeout(() => {
    mensaje.textContent = "";
    mensaje.className = "";
  }, 3000); // Limpia el mensaje después de 3 segundos
}

// Función para renderizar las tareas
function renderizarTareas() {
  listaTareas.innerHTML = ""; // Limpia la lista
  tareas.forEach((tarea, indice) => {
    const li = document.createElement("li");
    li.className = tarea.completada ? "tarea completada" : "tarea";
    li.innerHTML = `
      ${tarea.texto}
      <button onclick="marcarCompletada(${indice})">✔</button>
      <button onclick="eliminarTarea(${indice})">🗑</button>
    `;
    listaTareas.appendChild(li);
  });
}

// Función para añadir una tarea
async function agregarTarea(event) {
  event.preventDefault();
  let texto = inputTarea.value.trim();
  if (texto.length < 3) {
    mostrarMensaje("La tarea debe tener al menos 3 caracteres.", "error");
    return;
  }
  mostrarMensaje("Guardando...", "");
  try {
    await guardarTareaEnServidor(texto);
    tareas.push({ texto: texto, completada: false });
    renderizarTareas();
    inputTarea.value = "";
    mostrarMensaje("Tarea guardada.", "success");
  } catch (error) {
    mostrarMensaje(error, "error");
  }
}

// Función para marcar una tarea como completada
function marcarCompletada(indice) {
  tareas[indice].completada = !tareas[indice].completada;
  renderizarTareas();
}

// Función para eliminar una tarea
function eliminarTarea(indice) {
  tareas.splice(indice, 1);
  renderizarTareas();
}

// Escuchar el evento submit del formulario
formulario.addEventListener("submit", agregarTarea);

¿Cómo funciona?

  • Variables y arrays: tareas almacena los objetos de cada tarea.
  • DOM: renderizarTareas reconstruye la lista cada vez que hay cambios.
  • Eventos: El formulario escucha submit para añadir tareas.
  • Asincronía: guardarTareaEnServidor simula una llamada a un servidor con una promesa.
  • Objetos: Cada tarea es un objeto con texto y completada.

Este proyecto combina todo lo aprendido en el manual. Puedes ampliarlo añadiendo persistencia real con localStorage o conectándolo a una API PHP.

Nota: Para que las tareas sobrevivan al recargar la página sin necesidad de un servidor, puedes usar localStorage: localStorage.setItem("tareas", JSON.stringify(tareas)) guarda el array, y JSON.parse(localStorage.getItem("tareas")) lo recupera. Es el paso natural para ampliar este proyecto.

TOP