פרויקט: כפתור הניקוי

חלק מהיחידה ממשקי API של JSON במסלול ה-Django של Coddy. שיעור 17 מתוך 19.

נקודת הקצה עובדת; עכשיו נוסף לה כפתור לדף הבית. קובץ ה־app.js החדש מוכן, והשורה האחרונה שלו מחברת אותו:

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

addEventListener("click", clearDone) מפעיל את clearDone בכל לחיצה על הרכיב הזה. clearDone שולחת בקשת POST לנקודת הקצה שלך, כותבת את "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>