Consulta de clima em tempo real, direto no navegador. Digita o nome de uma cidade, clica em buscar e pronto: temperatura, condição do tempo e localização na tela. Sem framework, sem build, só HTML + CSS + JS puro fazendo o trabalho.
Abre o
index.htmlno navegador e já era, tá rodando.
- Usuário digita o nome da cidade no input.
- Clica em Buscar.
- O JS faz uma requisição
fetchpra API do OpenWeatherMap. - A resposta em JSON é tratada e os dados (cidade, país, temperatura, condição) são renderizados na tela.
- Se a cidade não existir ou der erro na requisição, aparece uma mensagem tratando o problema.
- HTML5 — estrutura da página
- CSS3 — estilização (fundo escuro, botão azul céu, tudo centralizado)
- JavaScript (Fetch API) — consumo da API e manipulação do DOM
- OpenWeatherMap API — fonte dos dados climáticos
API-de-clima---html/
├── index.html # estrutura da página
├── style.css # estilos
├── script.js # lógica de busca do clima
└── imagem.jpg # ícone do título
git clone https://github.com/lu-izah19/API-de-clima---html.git
cd API-de-clima---htmlDepois é só abrir o index.html no navegador (ou usar a extensão Live Server do VS Code).
Esse projeto usa uma chave da OpenWeatherMap. Bora falar sério por um segundo: hoje ela tá exposta direto no script.js, visível pra qualquer um que abrir o código. Funciona, mas não é o ideal — se essa chave for sua de produção, considera regenerar ela no painel do OpenWeatherMap e, no futuro, mover pra uma variável de ambiente (mesmo em projeto simples dá pra usar um backend leve tipo Node/Express só pra esconder a key). Pra portfólio/estudo tá tranquilo, só fica de olho.
- Esconder a API key (backend simples ou serverless function)
- Loading state enquanto busca
- Ícones de clima (sol, chuva, nuvem) baseados na resposta da API
- Busca por geolocalização automática
- Responsividade pra mobile (o
font-size: 100pxdo título quebra em telas pequenas) - Tratamento de erro mais visual (input vazio, cidade não encontrada)
Feito por Luiza Souza — estudante de Sistemas de Informação.