المشروع: زر المسح

جزء من قسم واجهات API بصيغة JSON في رحلة Django على Coddy. الدرس 17 من 19.

تعمل نقطة النهاية؛ والآن تُضاف إليها صفحة الرئيسية زرًا. أصبح الملف الجديد app.js جاهزًا، والسطر الأخير فيه يربطه بها:

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

تُشغّل addEventListener("click", clearDone) الدالة clearDone عند كل نقرة على ذلك العنصر. وترسل clearDone طلبًا إلى نقطة النهاية، وتكتب "Done tasks cleared: " + result.deleted داخل العنصر ذي المعرّف message، ثم تستدعي showSummary() وshowTasks() مجددًا لكي تعرض الصفحة الحالة الجديدة. يحدد النص البرمجي المعرّفات؛ ويجب أن تتطابق معها صفحتك.

التحدي

متوسط

اقرأ الملف الجديد app.js، ثم أضف في tasks/templates/tasks/home.html الزر الذي يستمع إليه البرنامج النصي، ونصه Clear done tasks، والعنصر الذي ستظهر فيه رسالته.

اضغط على «تشغيل» وانقر على Clear done tasks: ستظهر الرسالة Done tasks cleared: 1، وستبقى Call the bank في القائمة.

جرّب بنفسك

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