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 él. 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 "Cleared " + result.deleted + " done tasks." 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 decide los ids; tu página debe coincidir con ellos.

Desafío

Intermedio

Lee el nuevo app.js y después añade a la página de inicio:

El botón que escucha el script, con el texto Clear done tasks.
El elemento donde aparece su mensaje.

Pulsa Run y haz clic en el botón: el mensaje indica cuántas tareas se eliminaron, y Call the bank desaparece de 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>