---
# System prepended metadata

title: Aulas 22 e 23 - Front-end

---

![](https://i.imgur.com/xG74tOh.png)

# 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;
            })
            

        })
```