Proyecto final jQuery: aplicación de tareas con DOM, filtros y AJAX

En este proyecto vamos a integrar los conceptos principales de jQuery construyendo una aplicación sencilla de tareas.

La aplicación permitirá cargar tareas, filtrarlas, marcarlas como completadas y eliminarlas. Además veremos dónde encajaría AJAX si los datos provinieran de un backend.

Qué vamos a practicar

• selectores;
• val();
• eventos con on();
• manipulación del DOM;
• clases CSS;
• delegación de eventos;
• each();
• filtros;
• estructura preparada para AJAX.

HTML

<main class="app">
    <h1>Mis tareas con jQuery</h1>

    <form id="form-tarea">
        <input
            id="titulo"
            type="text"
            placeholder="Nueva tarea"
            required
        >

        <button type="submit">Agregar</button>
    </form>

    <div class="filtros">
        <button data-filtro="todas">Todas</button>
        <button data-filtro="pendientes">Pendientes</button>
        <button data-filtro="completadas">Completadas</button>
    </div>

    <p id="resumen"></p>

    <ul id="lista"></ul>
</main>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>

Estado de la aplicación

let tareas = [];
let filtroActual = "todas";

El array tareas contiene los datos y filtroActual determina qué elementos mostrar.

Crear una tarea

function crearTarea(titulo) {
    return {
        id: Date.now(),
        titulo: titulo,
        completada: false
    };
}

Filtrar

function obtenerVisibles() {
    if (filtroActual === "pendientes") {
        return tareas.filter(function (tarea) {
            return !tarea.completada;
        });
    }

    if (filtroActual === "completadas") {
        return tareas.filter(function (tarea) {
            return tarea.completada;
        });
    }

    return tareas;
}

Renderizar las tareas

function renderizar() {
    const lista = $("#lista");

    lista.empty();

    obtenerVisibles().forEach(function (tarea) {

        const item = $("<li>")
            .attr("data-id", tarea.id);

        const texto = $("<span>")
            .text(tarea.titulo);

        if (tarea.completada) {
            item.addClass("completada");
        }

        const completar = $("<button>")
            .attr("type", "button")
            .attr("data-accion", "completar")
            .text(
                tarea.completada
                    ? "Desmarcar"
                    : "Completar"
            );

        const eliminar = $("<button>")
            .attr("type", "button")
            .attr("data-accion", "eliminar")
            .text("Eliminar");

        item.append(texto, completar, eliminar);

        lista.append(item);
    });

    const pendientes = tareas.filter(function (tarea) {
        return !tarea.completada;
    }).length;

    $("#resumen").text(
        pendientes + " tarea(s) pendiente(s)"
    );
}

Agregar desde el formulario

$("#form-tarea").on("submit", function (event) {
    event.preventDefault();

    const titulo = $("#titulo").val().trim();

    if (titulo === "") {
        return;
    }

    tareas.push(
        crearTarea(titulo)
    );

    $("#titulo").val("");

    renderizar();
});

Completar y eliminar

Usamos delegación porque los botones se crean dinámicamente al renderizar.

$("#lista").on("click", "button", function () {

    const item = $(this).closest("li");
    const id = Number(item.attr("data-id"));
    const accion = $(this).attr("data-accion");

    if (accion === "completar") {

        tareas = tareas.map(function (tarea) {

            if (tarea.id === id) {
                return {
                    ...tarea,
                    completada: !tarea.completada
                };
            }

            return tarea;
        });

    }

    if (accion === "eliminar") {

        tareas = tareas.filter(function (tarea) {
            return tarea.id !== id;
        });

    }

    renderizar();
});

Cambiar filtros

$(".filtros").on("click", "button", function () {
    filtroActual = $(this).attr("data-filtro");

    renderizar();
});

Inicializar

$(function () {
    renderizar();
});

¿Dónde entraría AJAX?

En una aplicación real podríamos reemplazar el array local por peticiones al backend. Por ejemplo, cargar tareas con GET:

$.get("/api/tareas")
    .done(function (datos) {
        tareas = datos;
        renderizar();
    });

Y crear una tarea con POST:

$.post("/api/tareas", {
    titulo: "Nueva tarea"
})
.done(function (tarea) {
    tareas.push(tarea);
    renderizar();
});

Qué aprendimos

• seleccionar y modificar elementos;
• leer formularios;
• manejar eventos;
• crear contenido dinámico;
• usar delegación;
• trabajar con arrays y filtros;
• preparar una interfaz para conectarla con un backend.

Después de jQuery

Con esta base ya podés mantener proyectos existentes que utilicen jQuery y comprender integraciones con plugins como DataTables. El siguiente paso natural para una ruta web completa puede ser comenzar con backend mediante PHP y bases de datos.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← jQuery y APIs: trabajar con JSON y renderizar datos dinámicos

Con este proyecto completás la ruta inicial de jQuery.