Menu
CoddyTech

Проект: Кнопка очистки

Часть раздела JSON API путешествия по Django на Coddy. Урок 17 из 19.

Эндпоинт работает; теперь на главной странице появится кнопка для него. Новый app.js готов, и последняя строка подключает её:

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

addEventListener("click", clearDone) запускает clearDone при каждом нажатии на этот элемент. clearDone отправляет запрос на ваш эндпоинт, записывает "Cleared " + result.deleted + " done tasks." в элемент с идентификатором message и снова вызывает showSummary() и showTasks(), чтобы на странице отобразилось новое состояние. Скрипт задаёт идентификаторы; ваша страница должна им соответствовать.

challenge icon

Задание

Средне

Прочитай новый файл 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>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела JSON API

Потренируйтесь самостоятельно: Песочница Django