programacion-web/js/javascript17.js

validacion-formularios

    // Closure para manejar las tareas
    const taskManager = (() => {
      const STORAGE_KEY = 'tareasApp';
      
      // Obtener tareas del localStorage
      const obtenerTareas = () => {
        const tareasJSON = localStorage.getItem(STORAGE_KEY);
        return tareasJSON ? JSON.parse(tareasJSON) : [];
      };
      
      // Guardar tareas en localStorage
      const guardarTareas = (tareas) => {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(tareas));
      };
      
      // Agregar nueva tarea
      const agregarTarea = (texto) => {
        if (!texto.trim()) {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'La tarea no puede estar vacía',
            confirmButtonColor: '#4b6cb7'
          });
          return false;
        }
        
        const tareas = obtenerTareas();
        const nuevaTarea = {
          id: Date.now(),
          texto: texto.trim(),
          completada: false,
          fecha: new Date().toLocaleString()
        };
        
        tareas.push(nuevaTarea);
        guardarTareas(tareas);
        return true;
      };
      
      // Eliminar tarea
      const eliminarTarea = (id) => {
        Swal.fire({
          title: '¿Eliminar tarea?',
          text: "Esta acción no se puede deshacer",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#d33',
          cancelButtonColor: '#6c757d',
          confirmButtonText: 'Sí, eliminar',
          cancelButtonText: 'Cancelar'
        }).then((result) => {
          if (result.isConfirmed) {
            const tareas = obtenerTareas().filter(tarea => tarea.id !== id);
            guardarTareas(tareas);
            renderizarTareas();
            
            Swal.fire(
              'Eliminada!',
              'La tarea ha sido eliminada.',
              'success'
            );
          }
        });
      };
      
      // Marcar tarea como completada
      const toggleCompletada = (id) => {
        const tareas = obtenerTareas();
        const tarea = tareas.find(t => t.id === id);
        if (tarea) {
          tarea.completada = !tarea.completada;
          guardarTareas(tareas);
          renderizarTareas();
        }
      };
      
      // Renderizar tareas en el DOM
      const renderizarTareas = () => {
        const tareas = obtenerTareas();
        const container = document.getElementById('tasksContainer');
        
        if (tareas.length === 0) {
          container.innerHTML = `
            <div class="empty-state">
              <i class="bi bi-check-circle" style="font-size: 3rem;"></i>
              <h5>No hay tareas pendientes</h5>
              <p class="text-muted">Comienza agregando una nueva tarea</p>
            </div>
          `;
          return;
        }
        
        container.innerHTML = tareas.map(tarea => `
          <div class="card task-item mb-2">
            <div class="card-body d-flex justify-content-between align-items-center">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" ${tarea.completada ? 'checked' : ''} 
                  onchange="taskManager.toggleCompletada(${tarea.id})">
                <label class="form-check-label ${tarea.completada ? 'text-decoration-line-through text-muted' : ''}">
                  ${tarea.texto}
                </label>
                <div class="text-muted small mt-1">${tarea.fecha}</div>
              </div>
              <button class="btn btn-sm btn-delete" onclick="taskManager.eliminarTarea(${tarea.id})">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </div>
        `).join('');
      };
      
      // Exponer métodos públicos
      return {
        agregarTarea,
        eliminarTarea,
        toggleCompletada,
        renderizarTareas,
        obtenerTareas
      };
    })();

    // Inicializar la aplicación
    document.addEventListener('DOMContentLoaded', () => {
      // Renderizar tareas al cargar
      taskManager.renderizarTareas();
      
      // Manejar el formulario
      document.getElementById('addTaskBtn').addEventListener('click', () => {
        const input = document.getElementById('taskInput');
        if (taskManager.agregarTarea(input.value)) {
          input.value = '';
          taskManager.renderizarTareas();
        }
      });
      
      // Agregar tarea con Enter
      document.getElementById('taskInput').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          e.preventDefault();
          const input = document.getElementById('taskInput');
          if (taskManager.agregarTarea(input.value)) {
            input.value = '';
            taskManager.renderizarTareas();
          }
        }
      });
    });