diff --git a/weather/assets/404.png b/weather/assets/404.png new file mode 100644 index 0000000..6f98d23 Binary files /dev/null and b/weather/assets/404.png differ diff --git a/weather/assets/clear.png b/weather/assets/clear.png new file mode 100644 index 0000000..203e4ec Binary files /dev/null and b/weather/assets/clear.png differ diff --git a/weather/assets/cloud.png b/weather/assets/cloud.png new file mode 100644 index 0000000..bfbf9fc Binary files /dev/null and b/weather/assets/cloud.png differ diff --git a/weather/assets/drizzle.png b/weather/assets/drizzle.png new file mode 100644 index 0000000..01cd0e7 Binary files /dev/null and b/weather/assets/drizzle.png differ diff --git a/weather/assets/mist.png b/weather/assets/mist.png new file mode 100644 index 0000000..915a384 Binary files /dev/null and b/weather/assets/mist.png differ diff --git a/weather/assets/rain.png b/weather/assets/rain.png new file mode 100644 index 0000000..a6feda5 Binary files /dev/null and b/weather/assets/rain.png differ diff --git a/weather/assets/snow.png b/weather/assets/snow.png new file mode 100644 index 0000000..e03778d Binary files /dev/null and b/weather/assets/snow.png differ diff --git a/weather/index.html b/weather/index.html new file mode 100644 index 0000000..2bd9191 --- /dev/null +++ b/weather/index.html @@ -0,0 +1,57 @@ + + + + + + + Weather App + + + +
+
+
+ + + +
+
+ +
+

Sorry, Location not found!!!

+ 404 Error +
+ +
+ Weather Image + +
+

0 °C

+

light rain

+
+ +
+
+ +
+ 45% +

Humidity

+
+
+ +
+ +
+ 12Km/H +

Wind Speed

+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/weather/script.js b/weather/script.js new file mode 100644 index 0000000..9998fd0 --- /dev/null +++ b/weather/script.js @@ -0,0 +1,65 @@ +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 location_not_found = document.querySelector('.location-not-found'); + +const weather_body = document.querySelector('.weather-body'); + + +async function checkWeather(city){ + const api_key = "9f4dee87ad1bb67f119df4cdf109fa8e"; + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`; + + const weather_data = await fetch(`${url}`).then(response => response.json()); + + + if(weather_data.cod === `404`){ + location_not_found.style.display = "flex"; + weather_body.style.display = "none"; + console.log("error"); + return; + } + + console.log("run"); + location_not_found.style.display = "none"; + weather_body.style.display = "flex"; + temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`; + description.innerHTML = `${weather_data.weather[0].description}`; + + humidity.innerHTML = `${weather_data.main.humidity}%`; + wind_speed.innerHTML = `${weather_data.wind.speed}Km/H`; + + + switch(weather_data.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; + case 'Drizzle': + weather_img.src = "./assets/drizzle.png"; + break; + } + + console.log(weather_data); +} + + +searchBtn.addEventListener('click', ()=>{ + checkWeather(inputBox.value); +}); \ No newline at end of file diff --git a/weather/style.css b/weather/style.css new file mode 100644 index 0000000..94f64c9 --- /dev/null +++ b/weather/style.css @@ -0,0 +1,145 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + outline: none; + font-family: sans-serif; +} + +body{ + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(180deg, hsl(210, 100%, 75%), hsl(40, 100%, 75%)); +} + +.container{ + width: 400px; + height: min-content; + background-color: #fff; + border-radius: 12px; + padding: 28px; +} + +.search-box{ + width: 100%; + height: min-content; + display: flex; + justify-content: space-between; + align-items: center; +} + +.search-box input{ + width: 84%; + font-size: 20px; + text-transform: capitalize; + color: #000; + background-color: #e6f5fb; + padding: 12px 16px; + border-radius: 14px; +} + +.search-box input::placeholder{ + color: #000; +} + +.search-box button{ + width: 46px; + height: 46px; + background-color: #e6f5fb; + border-radius: 50%; + cursor: pointer; + font-size: 20px; +} + +.search-box button:hover{ + color: #fff; + background-color: #ababab; +} + +.weather-body{ + justify-content: center; + align-items: center; + flex-direction: column; + margin-block: 20px; + display: none; +} +.weather-body img{ + width: 60%; +} + +.weather-box{ + margin-block: 20px; + text-align: center; +} + +.weather-box .temperature{ + font-size: 40px; + font-weight: 800; + position: relative; +} + +.weather-box .temperature sup{ + font-size: 20px; + position: absolute; + font-weight: 600; +} + +.weather-box .description{ + font-size: 20px; + font-weight: 700; + text-transform: capitalize; +} + +.weather-details{ + width: 100%; + display: flex; + justify-content: space-between; + margin-top: 30px; +} + +.humidity, .wind{ + display: flex; + align-items: center; +} + +.humidity{ + margin-left: 20px; +} + +.wind{ + margin-right: 20px; +} + +.weather-details i{ + font-size: 36px; +} + +.weather-details .text{ + margin-left: 10px; + font-size: 16px; +} + +.text span{ + font-size: 20px; + font-weight: 700; +} + +.location-not-found{ + margin-top: 20px; + display: none; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.location-not-found h1{ + font-size: 20px; + color: #6b6b6b; + margin-block-end: 15px; +} +.location-not-found img{ + width: 80%; +} \ No newline at end of file