Uma página que chama a API

Parte da seção APIs JSON do Journey de Django da Coddy. Lição 12 de 19.

Sua API tem um cliente dentro do site: o JavaScript na página inicial. A página carrega uma vez, depois o script solicita dados à API e preenche a página sem recarregá-la. O script, tasks/static/tasks/app.js, já foi fornecido; sua parte é criar a página de que ele precisa.

fetch("/api/tasks/") envia uma solicitação GET do navegador do visitante, e response.json() lê a resposta. document.getElementById("task-list") encontra o elemento cujo id é task-list, então a página precisa ter um. Um script é executado assim que o navegador lê sua tag, por isso a tag deve vir depois dos elementos que ele usa, no final do body. Carregue-o da mesma forma que você carrega uma folha de estilos:

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

Os testes não conseguem executar JavaScript, então verificam a página e o JSON; a prévia executa o script de verdade.

Desafio

Médio

Leia tasks/static/tasks/app.js e, em seguida, em tasks/templates/tasks/home.html:

Adicione a lista que o script preenche, com o id que ele procura.
Carregue tasks/app.js por meio de {% static %}, posicionado de modo que a lista exista quando ele for executado.

Pressione Run: as três tarefas aparecem na página inicial.

Experimente você mesmo

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