From 0291ed283f5fe93024d9bda4dccccba7da2f4680 Mon Sep 17 00:00:00 2001 From: Shehzad Iqbal Date: Tue, 11 Jun 2024 11:56:27 +0500 Subject: [PATCH 1/2] fix: form submitting --- app.js | 9 ++++++--- index.html | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index a1ac9fa..e315472 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,5 @@ document.addEventListener('DOMContentLoaded', () => { + const form = document.querySelector(".search-box") const inputBox = document.querySelector('.input-box'); const searchBtn = document.getElementById('searchBtn'); const weather_img = document.querySelector('.weather-img'); @@ -23,7 +24,7 @@ document.addEventListener('DOMContentLoaded', () => { return; } - locationError.style.display = "none"; + locationError.style.display = 'none'; weatherBody.style.display = "flex"; temperature.innerHTML = `${Math.round(weatherData.main.temp - 273.15)}°C`; description.innerHTML = `${weatherData.weather[0].description}`; @@ -54,7 +55,9 @@ document.addEventListener('DOMContentLoaded', () => { } } - searchBtn.addEventListener('click', () => { + form.addEventListener('submit', (event) => { + event.preventDefault() + checkweather(inputBox.value); }); -}); +}); \ No newline at end of file diff --git a/index.html b/index.html index 7c92ff8..736fc51 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,10 @@
-
+
-
+

Sorry, location not found!

From b1994747cab3c98b39f230c8db3dea6a84bd6609 Mon Sep 17 00:00:00 2001 From: Shehzad Iqbal Date: Tue, 11 Jun 2024 12:26:02 +0500 Subject: [PATCH 2/2] fix: icon dynamic --- app.js | 108 +++++++++++++++++++++++++-------------------------------- 1 file changed, 47 insertions(+), 61 deletions(-) diff --git a/app.js b/app.js index e315472..e1987f4 100644 --- a/app.js +++ b/app.js @@ -1,63 +1,49 @@ -document.addEventListener('DOMContentLoaded', () => { - const form = document.querySelector(".search-box") - const inputBox = document.querySelector('.input-box'); - const searchBtn = document.getElementById('searchBtn'); - const weather_img = document.querySelector('.weather-img'); - const temperature = document.querySelector('.temperature'); - const description = document.querySelector('.description'); - const humidity = document.getElementById('humidity'); - const wind_speed = document.getElementById('wind-speed'); - const locationError = document.querySelector('.location-not-found'); - const weatherBody = document.querySelector('.weather-body'); - - async function checkweather(city) { - const api_Key = "3e2b8eb1f8d10ccf16c9cf7b95a9bd7b"; - const api_url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_Key}`; - - try { - const response = await fetch(api_url); - const weatherData = await response.json(); - - if (weatherData.cod === '404') { - locationError.style.display = "flex"; - weatherBody.style.display = "none"; - return; - } - - locationError.style.display = 'none'; - weatherBody.style.display = "flex"; - temperature.innerHTML = `${Math.round(weatherData.main.temp - 273.15)}°C`; - description.innerHTML = `${weatherData.weather[0].description}`; - humidity.innerHTML = `${weatherData.main.humidity}%`; - wind_speed.innerHTML = `${weatherData.wind.speed} Km/H`; - - switch (weatherData.weather[0].main) { - case 'Clouds': - weather_img.src = "./assets/cloud.png"; - break; - case "Clear": - weather_img.src = "./assets/clear.png"; - break; - case "Rain": - weather_img.src = "./assets/rain.png"; - break; - case "Mist": - weather_img.src = "./assets/mist.png"; - break; - case "Snow": - weather_img.src = "./assets/snow.png"; - break; - default: - weather_img.src = "./assets/default.png"; - } - } catch (error) { - console.error("Failed to fetch weather data:", error); - } +document.addEventListener("DOMContentLoaded", () => { + const form = document.querySelector(".search-box"); + const inputBox = document.querySelector(".input-box"); + const searchBtn = document.getElementById("searchBtn"); + const weather_img = document.querySelector(".weather-img"); + const temperature = document.querySelector(".temperature"); + const description = document.querySelector(".description"); + const humidity = document.getElementById("humidity"); + const wind_speed = document.getElementById("wind-speed"); + const locationError = document.querySelector(".location-not-found"); + const weatherBody = document.querySelector(".weather-body"); + + async function checkweather(city) { + const api_Key = "3e2b8eb1f8d10ccf16c9cf7b95a9bd7b"; + const api_url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_Key}`; + + try { + const response = await fetch(api_url); + const weatherData = await response.json(); + + if (weatherData.cod === "404") { + locationError.style.display = "flex"; + weatherBody.style.display = "none"; + return; + } + + locationError.style.display = "none"; + weatherBody.style.display = "flex"; + temperature.innerHTML = `${Math.round(weatherData.main.temp - 273.15)}°C`; + description.innerHTML = `${weatherData.weather[0].description}`; + humidity.innerHTML = `${weatherData.main.humidity}%`; + wind_speed.innerHTML = `${weatherData.wind.speed} Km/H`; + + const icon = weatherData.weather[0].icon; + + weather_img.src = `https://openweathermap.org/img/wn/${icon}.png`; + + form.reset(); + } catch (error) { + console.error("Failed to fetch weather data:", error); } + } + + form.addEventListener("submit", (event) => { + event.preventDefault(); - form.addEventListener('submit', (event) => { - event.preventDefault() - - checkweather(inputBox.value); - }); -}); \ No newline at end of file + checkweather(inputBox.value); + }); +});