js-fetch-API

Exercícios

Usando HTML, CSS e JS:

1. Refatore o exemplo, para que os estilos CSS e o código em JavaScript fiquem em arquivos separados.

2. A partir dos exemplos apresentados, crie uma única página Web de CRUD (Create, Read, Update, Delete) que permita o usuário postar, ler, atualizar, modificar, remover e filtrar postagens.

3. Usando a API do ViaCep (https://viacep.com.br/), crie uma página Web que permita o usuário realizar consultas por CEP.

4. Usando a API DummyJSON (https://dummyjson.com/), crie uma página Web que permita o usuário realizar consultas.

5. Usando a API Fetch, crie uma única página Web de CRUD (Create, Read, Update, Delete) que permita o usuário postar, ler, atualizar, modificar, remover e filtrar dados sobre cidades através do JSONServer (https://www.npmjs.com/package/json-server) no Replit (https://replit.com/). Exemplo de arquivo JSON com dados sobre cidades:

{
  "cidades": [
    {"id": 1, "imagem": "img/mg.png", "cidade": "Belo Horizonte", "estado": "MG", "população": 3800000},
    {"id": 2, "imagem": "img/sp.png", "cidade": "São Paulo", "estado": "SP", "população": 11800000},
    {"id": 3, "imagem": "img/rj.png", "cidade": "Rio de Janeiro", "estado": "RJ", "população": 5300000},
    {"id": 4, "imagem": "img/pr.png", "cidade": "Curitiba", "estado": "PR", "população": 1200000},
    {"id": 5, "imagem": "img/ce.png", "cidade": "Fortaleza", "estado": "CE", "população": 2100000}
  ]
}

6. Escreva sobre o cliente HTTP Axios (https://axios-http.com/docs/intro). Implemente uma página Web de CRUD (Create, Read, Update, Delete) que permita o usuário postar, ler, atualizar, modificar e remover dados usando o cliente HTTP Axios.

Links:

https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch

https://jsonplaceholder.typicode.com/

https://jsonplaceholder.typicode.com/guide/

https://viacep.com.br/

https://dummyjson.com/

https://axios-http.com/docs/intro