added files

SidoJain · Feb 13, 2024 · b49e163 · b49e163
commit b49e163
Show file tree

Hide file tree

Showing 11 changed files with 422 additions and 0 deletions.
diff --git a/assets/404.png b/assets/404.png
diff --git a/assets/bg.jpg b/assets/bg.jpg
diff --git a/assets/clear.png b/assets/clear.png
diff --git a/assets/cloud.png b/assets/cloud.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/assets/mist.png b/assets/mist.png
diff --git a/assets/rain.png b/assets/rain.png
diff --git a/assets/snow.png b/assets/snow.png
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="style.css" />
+		<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
+		<link rel="icon" href="assets/favicon.ico" />
+		<title>Weather</title>
+	</head>
+	<body>
+		<div class="container">
+			<div class="search-box">
+				<i class="bx bxs-map"></i>
+				<input id="input" type="text" placeholder="Enter City" />
+				<button class="bx bx-search"></button>
+			</div>
+
+			<div class="weather-box">
+				<div class="box">
+					<div class="weather">
+						<img src="" />
+						<p class="temp"><span></span></p>
+						<p class="desc"></p>
+					</div>
+				</div>
+			</div>
+
+			<div class="weather-details">
+				<div class="humidity">
+					<i class="bx bx-water"></i>
+					<div class="text">
+						<div class="info-humidity">
+							<span></span>
+						</div>
+						<p>Humidity</p>
+					</div>
+				</div>
+
+				<div class="wind">
+					<i class="bx bx-wind"></i>
+					<div class="text">
+						<div class="info-wind">
+							<span></span>
+						</div>
+						<p>Wind Speed</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="not-found">
+				<div class="box">
+					<img src="assets/404.png" />
+					<p>Oops! Location not found!</p>
+				</div>
+			</div>
+		</div>
+
+		<script src="script.js"></script>
+	</body>
+</html>
diff --git a/script.js 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)}<span>°C</span>`;
+    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');
+}