HuXn-WebDev
diff --git a/101.weatherApp/index.html b/101.weatherApp/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Weather App</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="weather-app">
+    <h1>Weather App 🌍</h1>
+
+    <div class="search-box">
+      <input type="text" id="locationInput" placeholder="Enter city name">
+      <button onclick="getWeather()">Search</button>
+    </div>
+
+    <div id="weatherCard" class="weather-card hidden">
+      <h2 id="city"></h2>
+      <img id="weatherIcon" src="" alt="weather icon">
+      <p id="condition"></p>
+      <h3 id="temperature"></h3>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/101.weatherApp/script.js b/101.weatherApp/script.js
@@ -0,0 +1,80 @@
+const API_KEY = "6a2b3ab7a9cd434d8cb100649261501";
+
+function getWeather() {
+  let location = document.getElementById("locationInput").value.trim();
+
+  // empty check
+  if (location === "") {
+    alert("Please enter city, pincode, state or country");
+    return;
+  }
+
+
+  if (location.startsWith("q=")) {
+    location = location.slice(2).trim();
+  }
+
+  // ✅ India pincode detect (6 digits)
+  if (/^[1-9][0-9]{5}$/.test(location)) {
+    location = location + ",IN";
+  }
+
+  // pincode + country (226001 India lucknow)
+  else if (/^[1-9][0-9]{5}\s+[a-zA-Z]+/.test(location)) {
+    location = location.replace(/\s+/, ",");
+  }
+
+  const url = `https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${encodeURIComponent(location)}&aqi=yes`;
+
+  fetch(url)
+    .then(response => response.json())
+    .then(data => {
+      if (data.error) {
+        alert("Location not found");
+        return;
+      }
+      showWeather(data);
+    })
+    .catch(() => {
+      alert("Network error");
+    });
+}
+
+function showWeather(data) {
+  document.getElementById("weatherCard").classList.remove("hidden");
+
+  document.getElementById("city").innerText =
+    `${data.location.name}, ${data.location.region}, ${data.location.country}`;
+
+  document.getElementById("temperature").innerText =
+    `${data.current.temp_c}°C`;
+
+  document.getElementById("condition").innerText =
+    data.current.condition.text;
+
+  document.getElementById("weatherIcon").src =
+    "https:" + data.current.condition.icon;
+
+  changeBackground(data.current.condition.text);
+}
+
+function changeBackground(condition) {
+  condition = condition.toLowerCase();
+
+  if (condition.includes("sunny") || condition.includes("clear")) {
+    document.body.style.background =
+      "linear-gradient(to right, #fceabb, #f8b500)";
+  } 
+  else if (condition.includes("cloud")) {
+    document.body.style.background =
+      "linear-gradient(to right, #bdc3c7, #2c3e50)";
+  } 
+  else if (condition.includes("rain") || condition.includes("drizzle")) {
+    document.body.style.background =
+      "linear-gradient(to right, #4e54c8, #8f94fb)";
+  } 
+  else {
+    document.body.style.background =
+      "linear-gradient(to right, #74ebd5, #acb6e5)";
+  }
+}
diff --git a/101.weatherApp/style.css b/101.weatherApp/style.css
@@ -0,0 +1,64 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", sans-serif;
+}
+
+body {
+  height: 100vh;
+  background: linear-gradient(to right, #74ebd5, #acb6e5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.weather-app {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 30px;
+  border-radius: 20px;
+  width: 320px;
+  text-align: center;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.weather-app h1 {
+  margin-bottom: 20px;
+  color: #fff;
+}
+
+.search-box {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.search-box input {
+  flex: 1;
+  padding: 10px;
+  border-radius: 10px;
+  border: none;
+  outline: none;
+}
+
+.search-box button {
+  padding: 10px 15px;
+  border: none;
+  border-radius: 10px;
+  background: #4facfe;
+  color: white;
+  cursor: pointer;
+}
+
+.weather-card {
+  color: white;
+}
+
+.weather-card img {
+  width: 80px;
+}
+
+.hidden {
+  display: none;
+}