ermogenes/index.html

## index.html
<!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>

## index.js
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);
	<!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>
	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);