Projeto: O Botão Limpar

Parte da seção APIs JSON do Journey de Django da Coddy. Lição 17 de 19.

O endpoint funciona; agora a página inicial ganha um botão para ele. O novo app.js está pronto, e sua última linha o conecta:

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

addEventListener("click", clearDone) executa clearDone a cada clique nesse elemento. clearDone envia uma solicitação POST ao seu endpoint, escreve "Done tasks cleared: " + result.deleted no elemento com o id message e chama showSummary() e showTasks() novamente para que a página mostre o novo estado. O script determina os ids; sua página deve corresponder a eles.

Desafio

Médio

Leia o novo app.js e, em seguida, em tasks/templates/tasks/home.html, adicione o botão que o script escuta, com o texto Clear done tasks, e o elemento em que a mensagem será exibida.

Pressione “Executar” e clique em Clear done tasks: a mensagem exibida é Done tasks cleared: 1, e Call the bank sai da lista.

Experimente você mesmo

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