diff --git a/101.weatherApp/index.html b/101.weatherApp/index.html new file mode 100644 index 0000000..c262154 --- /dev/null +++ b/101.weatherApp/index.html @@ -0,0 +1,28 @@ + + + + + Weather App + + + + +
+

Weather App 🌍

+ +
+ + +
+ + +
+ + + + diff --git a/101.weatherApp/script.js b/101.weatherApp/script.js new file mode 100644 index 0000000..8fda75e --- /dev/null +++ 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 new file mode 100644 index 0000000..400e81e --- /dev/null +++ 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; +}