Проект: Кнопка очистки
Часть раздела 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(), чтобы на странице отобразилось новое состояние. Скрипт задаёт идентификаторы; ваша страница должна им соответствовать.
Задание
СреднеПрочитай новый файл 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>
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела JSON API
Потренируйтесь самостоятельно: Песочница Django