Proyek: Tombol Hapus

Termasuk bagian API JSON dalam perjalanan Django di Coddy. Pelajaran 17 dari 19.

Endpoint ini berfungsi; sekarang halaman beranda mendapat tombol untuk endpoint tersebut. app.js yang baru sudah siap, dan baris terakhirnya menghubungkannya:

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

addEventListener("click", clearDone) menjalankan clearDone setiap kali elemen itu diklik. clearDone mengirim POST ke endpoint-mu, menulis "Done tasks cleared: " + result.deleted ke dalam elemen dengan id message, lalu memanggil showSummary() dan showTasks() lagi agar halaman menampilkan keadaan terbaru. Skrip menentukan id-idnya; halamanmu harus cocok.

Tantangan

Sedang

Baca app.js yang baru, lalu tambahkan tombol yang didengarkan skrip di tasks/templates/tasks/home.html, dengan tulisan Clear done tasks, serta elemen tempat pesannya ditampilkan.

Tekan Jalankan lalu klik Clear done tasks: pesannya berbunyi Done tasks cleared: 1, dan Call the bank tidak lagi muncul di daftar.

Coba sendiri

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