Proyek: Tombol Hapus

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

Endpoint berfungsi; sekarang halaman utama mendapatkan tombol untuknya. 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 permintaan POST ke endpoint-mu, menulis "Cleared " + result.deleted + " done tasks." ke dalam elemen dengan id message, lalu memanggil showSummary() dan showTasks() lagi agar halaman menampilkan keadaan baru. Skrip menentukan id yang digunakan, halamanmu harus cocok dengannya.

Tantangan

Sedang

Baca app.js yang baru, lalu tambahkan ke halaman utama:

Tombol yang didengarkan oleh skrip, dengan teks Clear done tasks.
Elemen tempat pesannya ditampilkan.

Tekan Jalankan dan klik tombolnya: pesan akan menyebutkan jumlah task yang dihapus, dan Call the bank akan keluar dari 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>