diff --git a/assets/404.png b/assets/404.png new file mode 100644 index 0000000..6f6efc7 Binary files /dev/null and b/assets/404.png differ diff --git a/assets/bg.jpg b/assets/bg.jpg new file mode 100644 index 0000000..21a2ae0 Binary files /dev/null and b/assets/bg.jpg differ diff --git a/assets/clear.png b/assets/clear.png new file mode 100644 index 0000000..ff3a568 Binary files /dev/null and b/assets/clear.png differ diff --git a/assets/cloud.png b/assets/cloud.png new file mode 100644 index 0000000..f966409 Binary files /dev/null and b/assets/cloud.png differ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..24f5553 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/mist.png b/assets/mist.png new file mode 100644 index 0000000..3df070d Binary files /dev/null and b/assets/mist.png differ diff --git a/assets/rain.png b/assets/rain.png new file mode 100644 index 0000000..ed6dd7c Binary files /dev/null and b/assets/rain.png differ diff --git a/assets/snow.png b/assets/snow.png new file mode 100644 index 0000000..5fad310 Binary files /dev/null and b/assets/snow.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..36ccc85 --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + + + + Weather + + +
+
+ + + +
+ +
+
+
+ +

+

+
+
+
+ +
+
+ +
+
+ +
+

Humidity

+
+
+ +
+ +
+
+ +
+

Wind Speed

+
+
+
+ +
+
+ +

Oops! Location not found!

+
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..35f5409 --- /dev/null +++ b/script.js @@ -0,0 +1,92 @@ +const container = document.querySelector('.container'); +const search = document.querySelector('.search-box button'); +const weatherBox = document.querySelector('.weather-box'); +const weatherDetails = document.querySelector('.weather-details'); +const error404 = document.querySelector('.not-found'); +const API_Key = '8c1d5802d34c8cd0f177ef09aca1fbe8'; + +search.addEventListener('click', () => { + const city = document.querySelector('.search-box input').value; + if (city == '') + return; + + fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_Key}`).then(response => response.json()).then(json => { + if (json.cod == '404') { + if (container.style.height == '550px') { + container.classList.add('exitAll'); + setTimeout(() => { + container.classList.remove('exitAll'); + func404(); + }, 1500); + } + else + func404(); + return; + } + + if (container.style.height == '550px') { + container.classList.add('exit'); + setTimeout(() => { + container.classList.remove('exit'); + func(json); + }, 1500); + } + else if (container.style.height == '400px') { + container.classList.add('exit404'); + setTimeout(() => { + container.classList.remove('exit404'); + func(json); + }, 1500); + } + else + func(json); + }); +}); + +const func = function (json) { + const img = document.querySelector('.weather-box img'); + const temp = document.querySelector('.weather-box .temp'); + const desc = document.querySelector('.weather-box .desc'); + const humidity = document.querySelector('.weather-details .humidity span'); + const wind = document.querySelector('.weather-details .wind span'); + + container.style.height = '550px'; + weatherBox.classList.add('active'); + weatherDetails.classList.add('active'); + error404.classList.remove('active'); + + switch (json.weather[0].main) { + case 'Clear': + img.src = 'assets/clear.png'; + break; + case 'Rain': + img.src = 'assets/rain.png'; + break; + case 'Clouds': + img.src = 'assets/cloud.png'; + break; + case 'Mist': + img.src = 'assets/mist.png'; + break; + case 'Snow': + img.src = 'assets/snow.png'; + break; + case 'Haze': + img.src = 'assets/mist.png'; + break; + default: + img.src = 'assets/cloud.png'; + } + + temp.innerHTML = `${parseInt(json.main.temp)}°C`; + desc.innerHTML = `${json.weather[0].description}`; + humidity.innerHTML = `${json.main.humidity}%`; + wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`; +} + +const func404 = function() { + container.style.height = '400px'; + weatherBox.classList.remove('active'); + weatherDetails.classList.remove('active'); + error404.classList.add('active'); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0ee19cd --- /dev/null +++ b/style.css @@ -0,0 +1,269 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Noto Sans', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: url(assets/bg.jpg); + background-size: cover; + background-position: center; +} + +.container { + position: relative; + width: min(80vw, 400px); + height: 100px; + background: rgba(82, 90, 206, 0.2); + backdrop-filter: blur(30px); + border: 2px solid rgba(54, 67, 175, 0.5); + border-radius: 16px; + padding: 20px; + color: white; + transition: height 0.5s ease; + overflow: hidden; +} + +.search-box { + position: relative; + width: 100%; + height: 50px; + display: flex; + align-items: center; + overflow: hidden; +} + +.search-box i { + position: absolute; + left: 10px; + font-size: 26px; +} + +.search-box input { + position: absolute; + width: 100%; + height: 100%; + background: transparent; + border: 2px solid rgba(255, 255, 255, 0.4); + border-radius: 10px; + outline: none; + font-size: 22px; + font-weight: 500; + color: white; + text-transform: uppercase; + padding: 0px 45px 0px 42px; +} + +.search-box input::placeholder { + color: white; + text-transform: capitalize; +} + +.search-box button { + position: absolute; + right: 0; + width: 40px; + height: 100%; + background: transparent; + border: none; + outline: none; + font-size: 30px; + color: white; + padding: 0px 40px 0px 5px; + cursor: pointer; +} + +.weather-box { + text-align: center; + margin: 30px 0px; + transition: transform 1s ease; +} + +.weather-box img { + width: 50%; +} + +.weather-box, +.weather-details, +.not-found { + visibility: hidden; + overflow: hidden; +} + +.weather-box.active, +.weather-details.active, +.not-found.active { + visibility: visible; +} + +.weather-box .box, +.not-found .box { + transform: translateY(-100%); +} + +.weather-box.active .box, +.not-found.active .box { + transform: translateY(0%); + transition: transform 1s ease; + transition-delay: 0.5s; +} + +.temp { + position: relative; + font-size: 64px; + line-height: 1; + font-weight: 600; + margin: 20px 0px 10px -28px; +} + +.temp span { + position: absolute; + font-size: 28px; + font-weight: 800; +} + +.desc { + font-size: 24px; + font-weight: 500; + text-transform: capitalize; +} + +.weather-details { + position: absolute; + bottom: 30px; + left: 0px; + width: 100%; + padding: 0px 20px; + display: flex; + overflow: hidden; +} + +.weather-details i { + font-size: 60px; + margin-right: 15px; +} + +.humidity, +.wind { + display: flex; + align-items: center; + width: 50%; + transform: translateY(-100%); +} + +.weather-details.active .humidity, +.weather-details.active .wind { + display: flex; + align-items: center; + width: 50%; + transform: translateY(0%); + transition: transform 1s ease; + transition-delay: .4s; +} + +.humidity { + padding-left: 14px; + justify-content: flex-start; +} + +.wind { + padding-right: 14px; + justify-content: flex-end; +} + +.weather-details span { + display: inline-block; + font-size: 24px; + font-weight: 600; +} + +.weather-details p { + font-size: 16px; + font-weight: 500; +} + +.not-found { + position: absolute; + top: 0; + left: 0; + width: 100%; + text-align: center; + margin-top: 150px; + transition: transform 1s ease; + overflow: hidden; +} + +.not-found img { + width: 60%; +} + +.not-found p { + font-size: 20px; + font-weight: 500; + margin: 10px; +} + +.text { + overflow: hidden; +} + +.weather, +.info-humidity, +.info-wind { + transition: transform 1s ease; +} + +.container.exit .weather { + transform: translateY(-100%); +} + +.container.exit .info-humidity { + transform: translateY(-200%); +} + +.container.exit .info-wind { + transform: translateY(-200%); +} + +.container.exitAll .weather { + transform: translateY(-100%); +} + +.container.exitAll .wind, +.container.exitAll .humidity { + transform: translateY(100%); + transition: transform 1s ease; + transition-delay: 0s; +} + +.container.exit404 .not-found .box { + transform: translateY(-120%); +} + +@media screen and (max-width: 500px) { + + .humidity, + .wind { + flex-direction: column; + } + + .humidity span, + .wind span { + font-size: 20px; + } + + .container.exit .info-humidity { + transform: translateX(200%); + } + + .container.exit .info-wind { + transform: translateX(-200%); + } +} \ No newline at end of file