프로젝트: 비우기 버튼

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

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

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

addEventListener("click", clearDone)는 해당 요소를 클릭할 때마다 clearDone을 실행합니다. clearDone은 엔드포인트에 POST 요청을 보내고, "Cleared " + result.deleted + " done tasks."를 id가 message인 요소에 기록한 다음, 페이지에 새 상태가 표시되도록 showSummary()와 showTasks()를 다시 호출합니다. 스크립트에서 id를 정하므로 페이지에서 이 id와 일치시켜야 합니다.

챌린지

중급

새 app.js를 읽고, 홈 페이지에 다음을 추가하세요.

스크립트가 동작을 감지하는 버튼으로, Clear done tasks라고 표시합니다.
메시지가 표시될 요소입니다.

Run을 누르고 버튼을 클릭하세요. 메시지에는 처리된 작업 수가 표시되고, 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>