frontend-1

commit 620ab81d518fb4e21424c129f51a25dbf2ff7398

Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>

weather: add basic weather fetcher function

 css/weather.css | 3 ++
 js/weather.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++
 weather.html | 4 +-


diff --git a/css/weather.css b/css/weather.css
new file mode 100644
index 0000000000000000000000000000000000000000..f4d336fdf7d1efe39c1a976fc5c77e15d53f77bd
--- /dev/null
+++ b/css/weather.css
@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}




diff --git a/js/weather.js b/js/weather.js
new file mode 100644
index 0000000000000000000000000000000000000000..89b29b139b34f8b1e8eb69210aba92a897c71141
--- /dev/null
+++ b/js/weather.js
@@ -0,0 +1,71 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const weatherApiKey = "";
+  const weatherContainer = document.getElementById("weather-info");
+  const locationElement = document.getElementById("location");
+  const temperatureElement = document.getElementById("temperature");
+  const conditionsElement = document.getElementById("conditions");
+  const loadingElement = document.getElementById("loading");
+
+  // Função para obter a geolocalização do usuário
+  const getUserLocation = () => {
+    if (navigator.geolocation) {
+      loadingElement.textContent = "Localização OK! Buscando dados de clima...";
+
+      navigator.geolocation.getCurrentPosition(fetchWeather, handleLocationError);
+    } else {
+      loadingElement.textContent = "Geolocalização não é suportada pelo seu navegador.";
+    }
+  }
+
+  // Função para buscar os dados de clima
+  const fetchWeather = (position) => {
+    const { latitude, longitude } = position.coords;
+    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&lang=pt_br&appid=${weatherApiKey}`;
+
+    fetch(apiUrl)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Erro ao buscar dados de clima.");
+        }
+        return response.json();
+      })
+      .then((data) => displayWeather(data))
+      .catch((error) => {
+        loadingElement.textContent = "Erro ao buscar previsão do tempo.";
+        console.error(error);
+      });
+  }
+
+  // Função para exibir os dados de clima
+  const displayWeather = (data) => {
+    const { name } = data;
+    const { temp } = data.main;
+    const { description } = data.weather[0];
+
+    loadingElement.classList.add("hidden");
+    weatherContainer.classList.remove("hidden");
+
+    locationElement.textContent = name;
+    temperatureElement.textContent = `${temp.toFixed(1)}°C`;
+    conditionsElement.textContent = description;
+  }
+
+  const handleLocationError = (error) => {
+    switch (error.code) {
+      case error.PERMISSION_DENIED:
+        loadingElement.textContent = "Permissão negada para acessar localização.";
+        break;
+      case error.POSITION_UNAVAILABLE:
+        loadingElement.textContent = "Localização indisponível.";
+        break;
+      case error.TIMEOUT:
+        loadingElement.textContent = "Tempo de solicitação esgotado.";
+        break;
+      default:
+        loadingElement.textContent = "Ocorreu um erro desconhecido.";
+        break;
+    }
+  }
+
+  getUserLocation();
+});




diff --git a/weather.html b/weather.html
index 308c5d451dfc2ea74b57d96e7ef71a9618e1386b..c8c56503cf76a04766adee8291eab259ea0c8c85 100644
--- a/weather.html
+++ b/weather.html
@@ -28,13 +28,13 @@       

Veja o clima na sua região

<p id="loading">Carregando informações...</p> <div id="weather-info" class="hidden"> <p><strong>Local:</strong> <span id="location"></span></p> - <p><strong>Temperatura:</strong> <span id="temperature"></span>°C</p> + <p><strong>Temperatura:</strong> <span id="temperature"></span></p> <p><strong>Condições:</strong> <span id="conditions"></span></p> </div> </section> </main> <footer> - <p>© 2025 Sua Aplicação - Todos os direitos reservados.</p> + <p>© 2025</p> </footer> <script src="js/menu.js" defer></script> <script src="js/weather.js" defer></script>