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