merge

README.md

@@ -21,9 +21,11 @@
 <p><strong>Funcionalidade 1:</strong> Permitir que o usuário digite o CEP para realizar a busca </p>
 <p><strong>Funcionalidade 2:</strong> Mostrar as informações acerca do CEP inserido</p>
 <p><strong>Funcionalidade 3:</strong> Mostrar a localização no Mapa</p>
+<p><strong>Funcionalidade 4:</strong> Mostrar as informações de clima</p>
 
 ## Como funciona?
 <p>O usuário insere o CEP que deseja descobrir e utilizando a <strong>API ViaCep</strong> obtemos os dados referentes ao Logradouro, Cidade e Estado, esses dados são incorporados ao link da <strong>API GoogleMaps Geocoder Embed</strong> que nos retorna a localização exata, podendo redirecionar ao Google Maps e obter uma rota para o endereço além de informações mais detalhadas sobre o local.</p>
+<p><strong>Feature: </strong>Possibilidade de obter as informações acerca do clima</p>
 
 ## Limitações:
 <p> O ViaMaps só é capaz de localizar endereços no Brasil pois utiliza uma API especifica para os códigos postais brasileiros, então não será possível obter localizações de outros países.</p>

index.html

@@ -6,7 +6,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@300&display=swap"rel="stylesheet">
-    <script src="app.js" defer></script>
     <link rel="shortcut icon" href="./img/logo.svg" type="image/x-icon">
     <link rel="stylesheet" href="./style.css">
     <title>ViaMaps</title>
@@ -19,12 +18,20 @@
         <div class="display">
             <div class="azul">
                 <h1>ViaMaps</h1>
-                <h3>Insira um CEP para a busca</h3>
+                <h3>Seja Bem-Vindo</h3>
             </div>
             <div class="input">
-                <input type="text" class="cep" id="cep" placeholder="Insira o CEP aqui:">
-                <button class="buscar" id="buscar">BUSCAR</button>
+                <a href="./pagLoc/index.html">
+                    <button class="buscar" id="buscar">OBTER <br> LOCALIZAÇÃO</button>
+                </a>
+                <a href="./pagClima/index.html">
+                    <button class="buscar" id="buscar">OBTER <br> CLIMA</button>
+                </a>
+                <a href="./pagAmbos/index.html">
+                    <button class="buscar" id="buscar">OBTER <br> AMBOS</button>
+                </a>
             </div>
+<<<<<<< HEAD
             <div class="infos">
                 <input type="text" id="rua" disabled>
             </div>
@@ -52,6 +59,8 @@ <h3>Insira um CEP para a busca</h3>
             <iframe id="iframe" width="1200" height="800" style="border: 10px; border-radius: 50px;" loading="lazy" allowfullscreen
             referrerpolicy="no-referrer-when-downgrade" src="">
         </iframe>
+=======
+>>>>>>> 9c6e9f406d74737d036a3788c8a4f1b34530cfc2
         </div>
     </main>
 </body>

pagAmbos/app.js

@@ -0,0 +1,99 @@
+'use strict'
+
+const cepInput = document.getElementById('cep')
+const buscar = document.getElementById('buscar')
+
+async function pegarEndereco(cep) {
+    const url = `https://viacep.com.br/ws/${cep}/json/`
+    const response = await fetch(url)
+    const endereco = await response.json()
+    return endereco
+}
+
+async function preencherCampos() {
+
+    const rua = document.getElementById('rua')
+    const cidade = document.getElementById('cidade')
+    const estado = document.getElementById('estado')
+
+    const cepInfo = await pegarEndereco(cepInput.value)
+
+    rua.value = cepInfo.logradouro
+    cidade.value = cepInfo.localidade
+    estado.value = cepInfo.uf
+
+}
+
+async function mudarLocalizacao() {
+
+    const cepInfo = await pegarEndereco(cepInput.value)
+
+    const rua = cepInfo.logradouro
+    const cidade = cepInfo.localidade
+    const estado = cepInfo.uf
+
+    const localizacao = document.getElementById('iframe').src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyAeVRmm_pxeTiNMChEeLFAJxC8nR-X6Mj4&q=" + rua + "," + cidade + "+" + estado
+
+    const weatherInfo = document.getElementById('weatherInfo')
+    const img = document.getElementById('img')
+
+    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cidade}&appid=dd0771563bdf95c8cbb055a772568db0&units=metric`
+
+    fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+            const cityName = data.name
+            const temperature = data.main.temp
+            const weatherDescription = data.weather[0].main
+            const country = data.sys.country
+
+            if (country !== "BR") {
+                weatherInfo.innerHTML = 'Infelizmente o sistema não conseguiu identificar a cidade'
+            } else {
+                if (weatherDescription == "Clouds") {
+                    const weatherDescription = "Nublado"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/clouds.png`
+
+                } else if (weatherDescription == "Clear") {
+                    const weatherDescription = "Limpo"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/clear.png`
+
+                } else if (weatherDescription == "Rain") {
+                    const weatherDescription = "Chuva"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/rain.png`
+
+                } else if (weatherDescription == "Drizzle") {
+                    const weatherDescription = "Garoa"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/drizz.png`
+
+                } else if (weatherDescription == "Thunderstorm") {
+                    const weatherDescription = "Tempestade"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/thunder.png`
+
+                } else if (weatherDescription == "Mist") {
+                    const weatherDescription = "Neblina"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/mist.png`
+
+                } else if (weatherDescription == "Fog") {
+                    const weatherDescription = "Névoa"
+                    weatherInfo.innerHTML = `Clima em ${cityName}: ${temperature}°C, ${weatherDescription}`
+                    img.src = `./icons/fog.png`
+
+                }
+            }
+
+        })
+        .catch(error => {
+            console.error('Erro na solicitação à API:', error)
+            weatherInfo.innerHTML = 'Erro ao buscar informações de clima.'
+        })
+}
+
+buscar.addEventListener('click', preencherCampos)
+buscar.addEventListener('click', mudarLocalizacao)

pagAmbos/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@300&display=swap" rel="stylesheet">
+    <script src="app.js" defer></script>
+    <link rel="shortcut icon" href="../img/logo.svg" type="image/x-icon">
+    <link rel="stylesheet" href="./style.css">
+    <title>ViaMaps</title>
+</head>
+
+<body>
+    <header>
+        <img src="./img/logo.svg" alt="Logo ViaMaps" class="logo">
+    </header>
+    <main>
+        <div class="display">
+            <div class="azul">
+                <h1>ViaMaps</h1>
+                <h3>Insira um CEP para obter a Localização e o Clima</h3>
+            </div>
+            <div class="input">
+                <input type="text" class="cep" id="cep" placeholder="Insira o CEP aqui:">
+                <button class="buscar" id="buscar">BUSCAR</button>
+            </div>
+            <div class="infos">
+                <input type="text" id="rua" disabled>
+            </div>
+            <div class="infos">
+                <input type="text" id="cidade" disabled>
+            </div>
+            <div class="infos">
+                <input type="text" id="estado" disabled>
+            </div>
+            <div id="weatherInfoo">
+                <div id="weatherInfo"></div>
+                <img src="" alt="" id="img">
+            </div>
+        </div>
+        <div class="maps">
+            <iframe id="iframe" width="1200" height="800" style="border: 10px; border-radius: 50px;" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade" src="">
+        </iframe>
+        </div>
+    </main>
+</body>
+
+</html>

pagAmbos/style.css

@@ -0,0 +1,149 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.logo {
+    width: 100px;
+    margin: 10px;
+}
+
+body {
+    background-color: #e6e6fa;
+    display: flex;
+}
+
+main {
+    display: flex;
+}
+
+.display {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+h1 {
+    font-family: 'Montserrat', sans-serif;
+    color: #007bff;
+    font-size: 100px;
+}
+
+h3 {
+    font-family: 'Noto Sans', sans-serif;
+    color: #007bff;
+    font-size: 30px;
+    padding-top: 12px;
+    padding-left: 10px;
+}
+
+.azul {
+    padding-top: 100px;
+}
+
+.input {
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.cep,
+#rua,
+#cidade,
+#estado {
+    border-radius: 20px;
+    height: 40px;
+    width: 400px;
+    box-shadow: 0px 4px 8px #0005;
+    border: 0 none;
+    background-color: white;
+}
+
+.cep::placeholder {
+    padding-left: 15px;
+    font-size: 18px;
+}
+
+.buscar {
+    background-color: #007bff;
+    width: 100px;
+    height: 40px;
+    border-radius: 15px;
+    border: 0 none;
+    box-shadow: 0px 4px 8px #0005;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.buscar:hover {
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out;
+    background-color: #008fff;
+    color: wheat;
+}
+
+.infos {
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+}
+
+input {
+    color: black;
+    padding-left: 15px;
+    font-size: 18px;
+}
+
+.maps {
+    padding-top: 80px;
+    padding-left: 90px;
+}
+
+#weatherInfoo {
+    width: 400px;
+    height: 100px;
+    border-radius: 20px;
+    background-color: #007bff;
+    display: flex;
+}
+
+#weatherInfo {
+    width: 270px;
+    color: #e6e6fa;
+    font-size: 26px;
+    padding: 12px;
+}
+
+#img {
+    width: 90px;
+}
+
+@media (max-width: 768px) {
+    body {
+        display: flex;
+        flex-direction: column;
+    }
+    main {
+        display: flex;
+        flex-direction: column;
+    }
+    .display {
+        gap: 12px;
+        padding-left: 80px;
+        width: 600px;
+    }
+    iframe {
+        width: 500px;
+        height: 325px;
+    }
+    .azul {
+        padding-top: 10px;
+    }
+    .maps {
+        padding-left: 40px;
+        padding-top: 40px;
+    }
+}