Progetto: il pulsante Cancella

Fa parte della sezione API JSON del percorso Django di Coddy. Lezione 17 di 19.

L'endpoint funziona; ora la pagina iniziale riceve un pulsante per usarlo. Il nuovo app.js è pronto e l'ultima riga lo collega:

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

addEventListener("click", clearDone) esegue clearDone a ogni clic su quell'elemento. clearDone invia una richiesta POST al tuo endpoint, scrive "Cleared " + result.deleted + " done tasks." nell'elemento con l'id message e richiama showSummary() e showTasks() affinché la pagina mostri il nuovo stato. Lo script stabilisce gli id; la tua pagina deve corrispondere.

Sfida

Medio

Leggi il nuovo app.js, poi aggiungi alla pagina iniziale:

Il pulsante a cui lo script è in ascolto, con il testo Clear done tasks.
L’elemento in cui viene inserito il messaggio.

Premi Run e fai clic sul pulsante: il messaggio indica quante attività sono state eliminate e Call the bank scompare dall’elenco.

Provalo tu

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