Last active
November 10, 2023 01:33
-
-
Save ermogenes/9c94afd7d731220888ab6eece999d284 to your computer and use it in GitHub Desktop.
Aula 09/11 - Fetch e AccuWeather API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Clima em Mongaguá</title> | |
</head> | |
<body> | |
<h1>Clima em Mongaguá</h1> | |
<img src="" alt="clima atual" id="icone_atual"> | |
<p id="atual"></p> | |
<hr /> | |
<div id="previsao"></div> | |
<script src="index.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const apiKey = "2TOqUrzAKAvAQb6Nf1BRmb2hUYvEVZXT"; // use a sua | |
// const codigoCidade = 623; // Paris | |
const codigoCidade = 45859; // Mongaguá | |
function formataCodigo(codigo) { | |
return ("00" + codigo).substring(("00" + codigo).length - 2); | |
} | |
function iniciar() { | |
const botaoCarregar = document.getElementById("carregar"); | |
botaoCarregar.addEventListener('click', carregar); | |
} | |
async function carregar() { | |
// --------------- current | |
const urlCurrent = `http://dataservice.accuweather.com//currentconditions/v1/${codigoCidade}?apikey=${apiKey}&language=pt-br`; | |
const respostaCurrent = await fetch(urlCurrent); | |
const dadosCurrent = await respostaCurrent.json(); | |
const cidade = dadosCurrent[0]; | |
const situacao = cidade.WeatherText; | |
const temperatura = cidade.Temperature.Metric.Value; | |
const icone = cidade.WeatherIcon; | |
const codigoIconeFormatado = formataCodigo(icone); | |
const urlIcone = `https://developer.accuweather.com/sites/default/files/${codigoIconeFormatado}-s.png` | |
const mensagem = `Em Mongaguá, estamos com clima ${situacao} e ${temperatura} °C.`; | |
const paragrafoAtual = document.getElementById("atual"); | |
paragrafoAtual.innerText = mensagem; | |
const iconeAtual = document.getElementById('icone_atual'); | |
iconeAtual.src = urlIcone; | |
// --------------- forecast | |
const urlPrevisao = `http://dataservice.accuweather.com/forecasts/v1/hourly/12hour/${codigoCidade}?apikey=${apiKey}&language=pt-br&metric=true` | |
const respostaPrevisao = await fetch(urlPrevisao); | |
const dadosPrevisao = await respostaPrevisao.json(); | |
console.log(dadosPrevisao); | |
for (const hora of dadosPrevisao) { | |
const dataHora = (new Date(hora.DateTime)).toLocaleTimeString(); | |
const icone = hora.WeatherIcon; | |
const codigoIconeFormatado = formataCodigo(icone); | |
const iconeUrl = `https://developer.accuweather.com/sites/default/files/${codigoIconeFormatado}-s.png` | |
const frase = hora.IconPhrase.toLowerCase(); | |
const temperatura = hora.Temperature.Value; | |
const percentChuva = hora.PrecipitationProbability; | |
const divPrevisao = document.getElementById('previsao'); | |
divPrevisao.insertAdjacentHTML("beforeend",` | |
<p><img src="${iconeUrl}"> ${dataHora} = ${frase}, com ${temperatura}°C, com ${percentChuva}% de chances de chover.</p> | |
`); | |
} | |
} | |
document.addEventListener('DOMContentLoaded', carregar); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment