Apuntes javascript

JavaScript lo resuelve todo... eventualmente.

Curso de JavaScript para Principiantes - Lección 12: Proyecto Final: Creando una Aplicación Simple

¡Bienvenido a la duodécima y última lección del curso! Has recorrido un camino increíble, aprendiendo variables, operadores, condicionales, bucles, funciones, arreglos, objetos, DOM, eventos y programación asíncrona. 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").

Conexión con PHP: En PHP, podrías construir algo similar generando un formulario HTML y procesando los datos en el servidor con $_POST y una base de datos. Aquí, todo ocurre en el navegador, con JavaScript manejando la lógica y el DOM para actualizar la interfaz en tiempo real.

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

// Arreglo 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
TOP