Projekt: Die Löschen-Schaltfläche

Teil des Abschnitts JSON-APIs der Django-Journey von Coddy. Lektion 17 von 19.

Der Endpunkt funktioniert; jetzt bekommt die Startseite eine Schaltfläche dafür. Die neue app.js ist fertig, und ihre letzte Zeile verknüpft sie damit:

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

addEventListener("click", clearDone) führt clearDone bei jedem Klick auf dieses Element aus. clearDone sendet eine POST-Anfrage an deinen Endpunkt, schreibt "Done tasks cleared: " + result.deleted in das Element mit der ID message und ruft erneut showSummary() und showTasks() auf, damit die Seite den neuen Zustand anzeigt. Das Skript legt die IDs fest; deine Seite muss dazu passen.

Aufgabe

Mittel

Lies die neue app.js und füge dann in tasks/templates/tasks/home.html die Schaltfläche hinzu, auf die das Skript reagiert und die „Clear done tasks“ heißt, sowie das Element, in das die Meldung eingefügt wird.

Klicke auf „Run“ und dann auf „Clear done tasks“: Die Meldung lautet „Done tasks cleared: 1“, und Call the bank bleibt in der Liste.

Probier es selbst

{% 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>