Trabalho de Consumo de API - JSONPlaceholder

Informações Acadêmicas

• Instituição: Universidade Paranaense (UNIPAR)
• Curso: Analise e Desenvolvimento de Sistemas
• Disciplina: Desenvolvimento Front-end
• Professor: Allan da Silva
• Aluno: Thiago Pacheco dos Santos
• RA: 60004984
• E-mail: thiago80507@edu.unipar.br

---

Sobre o Projeto

Este projeto é uma aplicação Front-end desenvolvida como requisito avaliativo para a disciplina de Desenvolvimento Front-end. O objetivo principal é demonstrar a capacidade de realizar requisições assíncronas (HTTP GET e POST) consumindo uma API RESTful externa (JSONPlaceholder), manipulando o DOM para renderizar os dados e tratando os estados da requisição.

O sistema foi construído utilizando HTML5, CSS3 e JavaScript puro, com o auxílio da biblioteca Axios para o tráfego de dados.

---

Funcionalidades Implementadas

O código foi estruturado para cumprir estritamente os quatro requisitos solicitados:

1. Listagem com Limite: Consumo da rota /posts utilizando o parâmetro de query ?_limit=5 para buscar e exibir apenas os 5 primeiros registros, renderizando o título e o corpo de cada post em formato de cartões na tela.
2. Envio de Dados (POST): Formulário de cadastro que captura o título e o corpo digitados pelo usuário e realiza o envio para a API simulando a criação de um novo post.
3. Prevenção de Múltiplos Envios: Lógica de bloqueio do botão de envio (disabled = true) ensinado em aula para ser usado durante a transação com o servidor, religando-o apenas quando a requisição é finalizada.
4. Feedback Visual e Tratamento de Erros: Implementação do bloco try/catch/finally para gerenciar os estados da tela, exibindo um indicador visual de "Carregando" durante as requisições e mensagens de erro amigáveis ao usuário caso ocorra falha na conexão, alem das escolhas das cores verdes para a criação do site que foi inspiração nas cores da fruta goiaba.

---

Tecnologias Utilizadas

• HTML5: Estrutura semântica da página.
• CSS3: Estilização em formato de painel moderno, paleta em tons terrosos/verde musgo e design responsivo.
• JavaScript: Lógica de requisições assíncronas (async/await) e manipulação do DOM.
• Axios: Cliente HTTP para comunicação com a API.