Projekt: Przycisk czyszczenia

Część sekcji API JSON ścieżki Django w Coddy. Lekcja 17 z 19.

Punkt końcowy działa; teraz na stronie głównej pojawia się przycisk, który z niego korzysta. Nowy plik app.js jest gotowy, a jego ostatni wiersz go podłącza:

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

addEventListener("click", clearDone") uruchamia clearDone po każdym kliknięciu tego elementu. clearDone wysyła żądanie POST do punktu końcowego, zapisuje "Done tasks cleared: " + result.deleted w elemencie o identyfikatorze message, a następnie ponownie wywołuje showSummary() i showTasks(), aby strona wyświetlała nowy stan. Skrypt określa identyfikatory; Twoja strona musi ich używać.

Wyzwanie

Średni

Przeczytaj nowy plik app.js, a następnie dodaj w tasks/templates/tasks/home.html przycisk, którego nasłuchuje skrypt, z napisem Clear done tasks, oraz element, w którym pojawi się komunikat.

Naciśnij „Uruchom” i kliknij Clear done tasks: komunikat wyświetli Done tasks cleared: 1, a Call the bank zniknie z listy.

Spróbuj swoich sił

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