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 bereit, und die letzte Zeile bindet sie ein:

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 "Cleared " + result.deleted + " done tasks." 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 mit ihnen übereinstimmen.

Aufgabe

Mittel

Lies die neue app.js und füge dann der Startseite Folgendes hinzu:

Den Button, auf den das Skript wartet: Clear done tasks.
Das Element, in dem die Meldung angezeigt wird.

Klicke auf „Run“ und dann auf den Button: Die Meldung zeigt an, wie viele Aufgaben gelöscht wurden, und „Call the bank“ wird aus der Liste entfernt.

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>