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

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

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

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

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

التحدي

متوسط

اقرأ app.js الجديد، ثم أضف إلى الصفحة الرئيسية:

الزر الذي يستمع إليه البرنامج النصي، ونصه Clear done tasks.
العنصر الذي تظهر فيه رسالته.

اضغط على «تشغيل» ثم انقر على الزر: تعرض الرسالة عدد المهام التي أُزيلت، وتختفي 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>