diff --git a/examples/Weather-app/index.html b/examples/Weather-app/index.html new file mode 100644 index 00000000..19d61e1a --- /dev/null +++ b/examples/Weather-app/index.html @@ -0,0 +1,28 @@ + + + + + + Weather App + + + +

Weather App

+
+
+ + +
+
+
city
+
Temperature

+
+
Feels like

+
Humidity

+
Windspeed

+
+
+
+ + + \ No newline at end of file diff --git a/examples/Weather-app/script.js b/examples/Weather-app/script.js new file mode 100644 index 00000000..a97cab08 --- /dev/null +++ b/examples/Weather-app/script.js @@ -0,0 +1,79 @@ +const city = document.querySelector(".city-name-input"); +const temp = document.querySelector(".temperature"); +const feels_like = document.querySelector(".feels-like"); +const humidity = document.querySelector(".humidity"); +const windspeed = document.querySelector(".windspeed"); +const btn = document.querySelector(".srch-btn"); +const cityOp = document.querySelector(".city-name-output"); + +// IMPORTANT: Replace "YOUR_API_KEY" with your actual OpenWeatherMap API key. +const apiKey = "YOUR_API_KEY"; +async function getWeatherInfo(city) { + try { + console.log(city); + if (city.length === 0) { + throw Error("Enter city name correctly"); + } + + let res = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}` + ); + console.log(res); + if (!res.ok) { + if (res.status === 404) { + throw Error("City not found"); + } else if (res.status === 401) { + throw Error("Access denied.Check your api key "); + } + } + res = await res.json(); + console.log(res); + //wind speed , feels like, temp,humidity + const { feels_like, temp, humidity } = res.main; + const { speed } = res.wind; + const name = res.name; + const desc = res.weather[0].main; + assignWeatherDetails(speed, temp, humidity, feels_like, name, desc); + } catch (e) { + document.querySelector(".city-name-input").value = ""; + console.log(e); + alert(e.message); + } +} + +btn.addEventListener("click", () => getWeatherInfo(city.value.trim())); +city.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + getWeatherInfo(city.value.trim()); + } +}); + +function assignWeatherDetails(s, t, h, fl, n, desc) { + windspeed.innerHTML = s; + temp.innerHTML = t + "oC" + `

${desc}

`; + humidity.innerHTML = h; + feels_like.innerHTML = fl + "oC"; + cityOp.innerHTML = n; + // Use textContent to prevent XSS vulnerabilities + windspeed.textContent = s; + humidity.textContent = h; + cityOp.textContent = n; + + temp.innerHTML = ""; + feels_like.innerHTML = ""; + + temp.textContent = t; + temp.insertAdjacentHTML("beforeend", "oC"); + const descPara = document.createElement("p"); + descPara.textContent = desc; + temp.appendChild(descPara); + + feels_like.textContent = fl; + feels_like.insertAdjacentHTML("beforeend", "oC"); + + city.value = ""; +} + +window.addEventListener("load", () => { + getWeatherInfo("London"); +}); diff --git a/examples/Weather-app/styles.css b/examples/Weather-app/styles.css new file mode 100644 index 00000000..cee86412 --- /dev/null +++ b/examples/Weather-app/styles.css @@ -0,0 +1,161 @@ +/* ---------- Base styles ---------- */ +body { + background-color: #f2f4f7; + color: #1e1e1e; + font-family: "Poppins", sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; + justify-content: center; + align-items: center; + margin: 0; +} + +h1 { + text-align: center; + margin-bottom: 1.5rem; + color: #2d6cdf; + font-weight: 600; + letter-spacing: 0.5px; +} + +/* ---------- Containers ---------- */ +.parent-container { + background-color: #ffffff; + border: 2px solid #e2e8f0; + display: flex; + flex-direction: column; + border-radius: 12px; + padding: 1.5rem; + width: 360px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + margin: 3rem; + transform: scale(1.2); +} + +.inputs-container { + display: flex; + flex-direction: row; + gap: 0.5rem; + margin-bottom: 1.2rem; +} + +/* ---------- Input + Button ---------- */ +.city-name-input { + flex: 1; + padding: 0.6rem; + border: 2px solid #cbd5e1; + border-radius: 8px; + background-color: #f9fafb; + color: #1e293b; + outline: none; + font-size: 0.95rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.city-name-input:focus { + border-color: #b1b1b1; + box-shadow: 0 2px 5px 3px #9097a133; +} + +.srch-btn { + background-color: #3b82f6; + color: white; + border: none; + padding: 0.6rem 0.9rem; + border-radius: 8px; + cursor: pointer; + font-weight: 600; /* <-- Bold text */ + font-size: 0.9rem; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +.srch-btn:hover { + background-color: #2563eb; +} + +.srch-btn:active { + transform: scale(0.97); +} + +/* ---------- Outputs ---------- */ +.outputs-container { + border: 2px solid #e2e8f0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 1rem; + border-radius: 10px; + background-color: #f9fafb; +} + +.city-name-output { + text-align: center; + font-size: 1.3rem; + margin-bottom: 0.5rem; + color: #2563eb; +} + +.temp-container { + text-align: center; + margin-bottom: 1rem; +} + +.temperature { + font-size: 2rem; + font-weight: 600; + color: #1e1e1e; +} + +/* ---------- Text data boxes ---------- */ +.text-container-parent { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + gap: 0.6rem; +} + +.text-container-parent div { + flex: 1; + border: 2px solid #e2e8f0; + background-color: #ffffff; + border-radius: 10px; + padding: 0.8rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); +} + + + +.text-container-parent div p { + margin: 0; + font-weight: 600; + color: #0f172a; + font-size: 1rem; +} + +.text-container-parent div span { + color: #475569; + font-size: 0.9rem; +} + +/* Medium screens (tablets) */ +@media (max-width: 768px) { + .parent-container { + transform: scale(1); /* normal size */ + margin-top: 1.5rem; + } +} + +/* Small screens (mobiles) */ +@media (max-width: 480px) { + .parent-container { + transform: scale(0.80); /* smaller size */ + margin-top: 1rem; + } +} \ No newline at end of file