Una página que llama a la API

Parte de la sección API JSON del Journey de Django de Coddy. Lección 12 de 19.

Tu API tiene un cliente dentro del sitio: JavaScript en la página de inicio. La página se carga una vez, después su script solicita datos a la API y completa la página sin recargarla. El script, tasks/static/tasks/app.js, ya está dado; tu tarea es crear la página que necesita.

fetch("/api/tasks/") envía una solicitud GET desde el navegador del visitante, y response.json() lee la respuesta. document.getElementById("task-list") encuentra el elemento cuyo id es task-list, así que la página debe tener uno. Un script se ejecuta en cuanto el navegador lee su etiqueta, por lo que la etiqueta va después de los elementos que utiliza, al final del cuerpo:

{% load static %}
<link rel="stylesheet" href="{% static 'shop/style.css' %}">

Las comprobaciones no pueden ejecutar JavaScript, así que prueban la página y el JSON; la vista previa ejecuta el script de verdad.

Desafío

Intermedio

Lee tasks/static/tasks/app.js; después, en tasks/templates/tasks/home.html:

Añade la lista que rellena el script, con el id que busca.
Carga tasks/app.js mediante {% static %}, colocándolo de modo que la lista exista cuando se ejecute.

Pulsa Run: las tres tareas aparecen en la página de inicio.

Pruébalo tú mismo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
</body>
</html>