# Aulas 22 e 23 - Front-end
## Questões 1 a 4
### HTML
```HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Citação Aleatória</title>
</head>
<body style='text-align: center;'>
<div class="conteudo">
<span class="citacao"></span> <br \>
<button>Carregar nova citação</button>
</div>
<script src="citacao-aleatoria.js"></script>
</body>
</html>
```
### JS
```JS
const textoAPI = () => {
fetch("https://programming-quotes-api.herokuapp.com/quotes/random/lang/en").then((objetoCitacao) => {
const citacaoJson = objetoCitacao.json();
return citacaoJson;
}).then((citacaoJson) => {
const texto = citacaoJson.en;
const autor = citacaoJson.author;
document.querySelector("span").innerText = texto + ' - ' + autor;
})
}
textoAPI();
/* document.querySelector("button").addEventListener("click", textoAPI); */
document.querySelector("button").addEventListener("click", () => {
promessaMS(2000).then(textoAPI);
});
const promessa = new Promise ((resolve) => {
setTimeout(() => {
resolve()
}
, 1000)
});
promessa.then((valorPromessa) => {
alert(valorPromessa);
})
const promessaMS = (ms) => {
return new Promise ((resolve) => {
setTimeout(() => {
resolve()
}
, ms)
})
.then((valorPromessa) => {
alert(valorPromessa);
})
}
```
## Questões 5
### HTML
```HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="previsaodotempo.css">
<title>Previsão do Tempo</title>
</head>
<body>
<h1>Previsão do tempo em <span class="cidade"></span>, <span class="estado"></span></h1>
<ul class="clima">
<li class="dia">
<img src="">
<h2>Hoje</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
<li class="dia">
<img src="">
<h2>Amanhã</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
<li class="dia">
<img src="">
<h2>Daqui a 2 dias</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
<li class="dia">
<img src="">
<h2>Daqui a 3 dias</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
<li class="dia">
<img src="">
<h2>Daqui a 4 dias</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
<li class="dia">
<img src="">
<h2>Daqui a 5 dias</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
<li class="dia">
<img src="">
<h2>Daqui a 6 dias</h2>
<div class="descricaoClima">
<span class="tipoClima"></span>
</div>
<div class="temperatura">
<span class="min"></span> °C
-
<span class="max"></span> °C
</div>
</li>
</ul>
<script src="previsaodotempo.js"></script>
</body>
</html>
```
### CSS
```CSS
body {
margin: 1em;
background-color: hsl(224.2, 30%, 75%);
color: hsl(224.2, 30%, 25%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
display: flex;
margin: -1em;
}
li {
margin: 1em;
}
h2 {
font-size: 1.25em;
}
```
### JS
```JS
fetch("https://extreme-ip-lookup.com/json/")
.then(objetoIP => {
return objetoIP.json()
})
.then(respostaJSON => {
document.querySelector(".cidade").innerText = respostaJSON.city;
document.querySelector(".estado").innerText = respostaJSON.region;
return fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${respostaJSON.lat}&lon=${respostaJSON.lon}&units=metric&lang=pt_BR&appid=47b16d41765388e1d2e251b373b570c0`)
})
.then((objetoTemperatura) => {
return objetoTemperatura.json();
})
.then((JSONtemperatura) => {
const dias = document.querySelectorAll("li");
dias.forEach((dia, i) => {
dia.querySelector('img').setAttribute("src", `http://openweathermap.org/img/wn/${JSONtemperatura.daily[i].weather[0].icon}@2x.png`);
dia.querySelector(".min").innerText = JSONtemperatura.daily[i].temp.min;
dia.querySelector(".max").innerText = JSONtemperatura.daily[i].temp.max;
dia.querySelector(".tipoClima").innerText = JSONtemperatura.daily[i].weather[0].description;
})
})
```
Sign in with Wallet
Connect another wallet