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 ; la page d’accueil a maintenant 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 à ton point de terminaison, écrit "Done tasks cleared: " + result.deleted 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 ; ta page doit utiliser les mêmes.

Défi

Moyen

Lis le nouveau app.js, puis ajoute dans tasks/templates/tasks/home.html le bouton auquel le script réagit, avec le texte Clear done tasks, ainsi que l’élément dans lequel son message s’affiche.

Appuie sur « Jouer » et clique sur Clear done tasks : le message affiche Done tasks cleared: 1, et Call the bank reste dans 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>