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>