Project: The Clear Button

Part of the JSON APIs section of Coddy's Django journey. Lesson 17 of 19.

The endpoint works; now the home page gets a button for it. The new app.js is ready, and its last line wires it up:

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

addEventListener("click", clearDone) runs clearDone on every click of that element. clearDone posts to your endpoint, writes "Done tasks cleared: " + result.deleted into the element with the id message, and calls showSummary() and showTasks() again so the page shows the new state. The script decides the ids; your page must match them.

Challenge

Medium

Read the new app.js, then in tasks/templates/tasks/home.html add the button the script listens to, saying Clear done tasks, and the element its message goes into.

Press Run and click Clear done tasks: the message reads Done tasks cleared: 1, and Call the bank leaves the list.

Try it yourself

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