Projet : Le bouton Effacer

Fait partie de la section API JSON du Journey Django de Coddy. Leçon 17 sur 19.

Le point de terminaison fonctionne ; maintenant, la page d’accueil se dote d’un bouton pour l’utiliser. Le nouveau fichier app.js est prêt, et sa dernière ligne le relie au bouton :

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

addEventListener("click", clearDone) exécute clearDone à chaque clic sur cet élément. clearDone envoie une requête POST à votre point de terminaison, écrit "Cleared " + result.deleted + " done tasks." dans l’élément dont l’identifiant est message, puis appelle à nouveau showSummary() et showTasks() pour que la page affiche le nouvel état. Le script détermine les identifiants ; votre page doit correspondre.

Défi

Moyen

Lis le nouveau app.js, puis ajoute à la page d’accueil :

Le bouton auquel le script est associé, avec le texte Clear done tasks.
L’élément dans lequel son message s’affiche.

Appuie sur Run et clique sur le bouton : le message indique combien de tâches ont été supprimées, et Call the bank disparaît de la liste.

Essayez vous-même

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