Proyecto: El botón Borrar

Parte de la sección API JSON del Journey de Django de Coddy. Lección 17 de 19.

El endpoint funciona; ahora la página de inicio tiene un botón para usarlo. El nuevo app.js está listo, y su última línea lo conecta:

document.getElementById("clear-done").addEventListener("click", clearDone);

addEventListener("click", clearDone) ejecuta clearDone cada vez que se hace clic en ese elemento. clearDone envía una solicitud POST a tu endpoint, escribe "Done tasks cleared: " + result.deleted en el elemento con el id message y vuelve a llamar a showSummary() y showTasks() para que la página muestre el nuevo estado. El script determina los ids; tu página debe coincidir con ellos.

Desafío

Intermedio

Lee el nuevo app.js y luego, en tasks/templates/tasks/home.html, añade el botón que escucha el script, con el texto Clear done tasks, y el elemento donde aparece su mensaje.

Pulsa «Ejecutar» y haz clic en Borrar tareas completadas: el mensaje dice «Tareas completadas borradas: 1», y Llamar al banco sigue en la lista.

Pruébalo tú mismo

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
    <p id="summary"></p>
    <ul id="task-list"></ul>
    <script src="{% static 'tasks/app.js' %}"></script>
</body>
</html>