Update script.js

HelenLazarotti · Sep 22, 2022 · eadac97 · eadac97
1 parent e81af86
commit eadac97
Showing 1 changed file with 94 additions and 47 deletions.
diff --git a/js/script.js b/js/script.js
@@ -1,47 +1,94 @@
-        const apiKey = "4c3e2052c9bffd693c776f8904dbb238";
-
-        const apiCountryURL = "https://countryflagsapi.com/png/";
-
-        const cityInput = document.querySelector("#city-input");
-        const searchBtn = document.querySelector("#search");
-
-        const cityElement = document.querySelector("#city");
-        const tempElement = document.querySelector("#temperature span");
-        const descElement = document.querySelector("#description");
-        const weatherIconElement = document.querySelector("#weather-icon");
-        const countryElement = document.querySelector("#country");
-        const humidityElement = document.querySelector("#humidity span");
-        const windElement = document.querySelector("#wind span");
-        const weatherContainer = document.querySelector("#weather-data");
-
-        const getWeatherData = async(city) =>{
-            const apiWeatherURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}&lang=pt_br`;
-            const res = await fetch(apiWeatherURL);
-            const data = await res.json();
-            return data;
-        };
-
-        const showWeatherData = async(city) =>{
-            const data = await getWeatherData(city);
-            cityElement.innerText = data.name;
-            tempElement.innerText = parseInt(data.main.temp);
-            descElement.innerText = data.weather[0].description;
-            weatherIconElement.setAttribute("src", `http://openweathermap.org/img/wn/${data.weather[0].icon}.png`);
-            countryElement.setAttribute("src", apiCountryURL + data.sys.country);
-            humidityElement.innerText = `${data.main.humidity}%`;
-            windElement.innerText = `${data.wind.speed}km/h`;
-            weatherContainer.classList.remove("hide");
-        };
-
-        searchBtn.addEventListener("click", (e) =>{
-            e.preventDefault();
-            const city = cityInput.value;
-            showWeatherData(city);
-        })
-
-        cityInput.addEventListener("keyup", (e) => {
-            if(e.code === "Enter"){
-                const city = e.target.value;
-                showWeatherData(city);
-            }
-        })
+ //variáveis e seleções de elementos
+ const apiKey = "4c3e2052c9bffd693c776f8904dbb238";
+
+ const apiCountryURL = "https://countryflagsapi.com/png/";
+
+ //crio variáveis para todos os elementos que precisam ser mutados com base na minha API
+ const cityInput = document.querySelector("#city-input");
+ const searchBtn = document.querySelector("#search");
+
+ const cityElement = document.querySelector("#city");
+ const tempElement = document.querySelector("#temperature span");
+ const descElement = document.querySelector("#description");
+ const weatherIconElement = document.querySelector("#weather-icon");
+ const countryElement = document.querySelector("#country");
+ const humidityElement = document.querySelector("#humidity span");
+ const windElement = document.querySelector("#wind span");
+ const weatherContainer = document.querySelector("#weather-data");
+
+
+ //Funções
+
+ //função que acessa a API:
+     //aqui é uma função assincrona(async), pq como é uma API pode demorar um pouco pra responder
+ const getWeatherData = async(city) =>{
+
+     //peguei o link do Current weather data e acrescentei o q=${city}, pois vai pegar com base no que o usuário digitar:
+     const apiWeatherURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}&lang=pt_br`;
+
+     //dps do {city} coloquei unidades de medidas como métricas(&units=metric), coloco a minha API(appid=${apiKey})-> com o nome da variável que eu criei lá em cima que contem a url da api que estou trabalhando. E coloco para portuguès Brasil.
+
+     //preciso esperar ou fetch
+     const res = await fetch(apiWeatherURL);
+
+     //vai chegar os dados em json, ai transformo para um objeto js:
+     const data = await res.json();
+     return data;
+ };
+
+ //essa função anonima vai esperar a cidade e exibir os dados da API:
+ const showWeatherData = async(city) =>{
+     const data = await getWeatherData(city);
+
+     //agr chamo os elementos pra mostrar na tela:
+     cityElement.innerText = data.name;
+
+     tempElement.innerText = parseInt(data.main.temp);//botei parseInt, pois quero num einteiro, se não me retorna valor com vírcula.
+
+     descElement.innerText = data.weather[0].description;// botei 0 pq quero a 1º posição como la no objeto é array.
+
+     weatherIconElement.setAttribute("src", `http://openweathermap.org/img/wn/${data.weather[0].icon}.png`);// coloquei setAttribue pq é uma img, logo preciso achar a imagem, e troquei ali entre img/wn/01d.png > por img/wn/${data.weather[0].icon}.png
+
+     countryElement.setAttribute("src", apiCountryURL + data.sys.country);
+
+     humidityElement.innerText = `${data.main.humidity}%`;
+
+     windElement.innerText = `${data.wind.speed}km/h`;
+
+     weatherContainer.classList.remove("hide");//pra remover a classe hide e poder mostrar todas as informações
+ };
+
+
+ //Eventos
+
+//pra quando eu clicar no botão ele uma função anônima, pegando o argumento do envento.
+
+//Como é um botão do formulário, ele vai tentar pegar e enviar o form, mas vai dar erro, então
+
+
+ searchBtn.addEventListener("click", (e) =>{
+     e.preventDefault();
+     //pra isso não acontecer
+
+     //preciso pegar o valor do input da minha cidade pra fazer a busca da minha função da API
+     const city = cityInput.value;
+
+     showWeatherData(city);
+ })
+
+ cityInput.addEventListener("keyup", (e) => {
+     if(e.code === "Enter"){
+         const city = e.target.value;
+         showWeatherData(city);
+     }
+ })
+
+
+ //essa é a minha chave da API do tempo
+ //pra ver se minha key ta funcionando procuro > Current weather data  clico em API docs > cato o API call que é um link e copio/colo no navegador e coloca a minha chave dps do apiid=
+
+ //4c3e2052c9bffd693c776f8904dbb238
+
+ //https://api.openweathermap.org/data/2.5/weather?lat={latitude}&lon={longitude}&appid=4c3e2052c9bffd693c776f8904dbb238
+
+ //link da API https://openweathermap.org/