프로젝트: 비우기 버튼

Coddy Django 여정의 JSON API 섹션에 포함된 레슨. 19개 중 17번째.

엔드포인트가 작동하니 이제 홈 페이지에 버튼을 추가합니다. 새 app.js가 준비되었고, 마지막 줄에서 버튼을 연결합니다:

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

addEventListener("click", clearDone)는 해당 요소를 클릭할 때마다 clearDone을 실행합니다. clearDone은 엔드포인트에 POST 요청을 보내고, "Done tasks cleared: " + result.deleted를 message ID를 가진 요소에 표시한 다음, 페이지에 새 상태가 나타나도록 showSummary()와 showTasks()를 다시 호출합니다. 스크립트에서 ID를 정하므로 페이지의 ID도 이에 맞아야 합니다.

챌린지

중급

새 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>