From 9a7775a1c6a62587d3abce4639229cf1ebfc9c9b Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 01:34:38 +0530 Subject: [PATCH 1/7] Add weather app to fetch and display weather by city name --- examples/index.html | 28 ++++++++ examples/script.js | 56 +++++++++++++++ examples/styles.css | 161 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 245 insertions(+) create mode 100644 examples/index.html create mode 100644 examples/script.js create mode 100644 examples/styles.css diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 00000000..5e23fbd7 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,28 @@ + + + + + + Document + + + +

Weather App

+
+
+ + +
+
+
city
+
Temp

+
+
Feels like

+
Humidity

+
Windspeed

+
+
+
+ + + \ No newline at end of file diff --git a/examples/script.js b/examples/script.js new file mode 100644 index 00000000..f099eadd --- /dev/null +++ b/examples/script.js @@ -0,0 +1,56 @@ +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"); + +const apiKey = "6244ab888f079565d5ce1deabddc3f77"; +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) { + throw Error("Error occured.Could not find the city "); + } + 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; + assignWeatherDetails(speed, temp, humidity, feels_like, name); + } 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) { + windspeed.innerHTML = s; + temp.innerHTML = t + "oC"; + humidity.innerHTML = h; + feels_like.innerHTML = fl + "oC"; + cityOp.innerHTML = n; + city.value = ""; +} + +window.addEventListener("load", () => { + getWeatherInfo("kurnool"); +}); diff --git a/examples/styles.css b/examples/styles.css new file mode 100644 index 00000000..cee86412 --- /dev/null +++ b/examples/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 From 8f3c2750b86f0dfe3719bc2cb4d8939edcef7db5 Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 01:44:42 +0530 Subject: [PATCH 2/7] Add weather app to fetch and display weather by city name --- examples/index.html | 2 +- examples/script.js | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/index.html b/examples/index.html index 5e23fbd7..e52a69ed 100644 --- a/examples/index.html +++ b/examples/index.html @@ -15,7 +15,7 @@

Weather App

city
-
Temp

+
Temperature

Feels like

Humidity

diff --git a/examples/script.js b/examples/script.js index f099eadd..9df30ea6 100644 --- a/examples/script.js +++ b/examples/script.js @@ -27,7 +27,9 @@ async function getWeatherInfo(city) { const { feels_like, temp, humidity } = res.main; const { speed } = res.wind; const name = res.name; - assignWeatherDetails(speed, temp, humidity, feels_like, name); + const desc = res.weather[0].main; + console.log(res.weather[0].description); + assignWeatherDetails(speed, temp, humidity, feels_like, name, desc); } catch (e) { document.querySelector(".city-name-input").value = ""; console.log(e); @@ -42,9 +44,9 @@ city.addEventListener("keydown", (event) => { } }); -function assignWeatherDetails(s, t, h, fl, n) { +function assignWeatherDetails(s, t, h, fl, n, desc) { windspeed.innerHTML = s; - temp.innerHTML = t + "oC"; + temp.innerHTML = t + "oC" + `

${desc}

`; humidity.innerHTML = h; feels_like.innerHTML = fl + "oC"; cityOp.innerHTML = n; From 9d5bc00695257b7bb13d3643775d0fd17da06342 Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 02:00:18 +0530 Subject: [PATCH 3/7] Add weather app to fetch and display weather by city name --- examples/{ => Weather-app}/index.html | 0 examples/{ => Weather-app}/script.js | 0 examples/{ => Weather-app}/styles.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename examples/{ => Weather-app}/index.html (100%) rename examples/{ => Weather-app}/script.js (100%) rename examples/{ => Weather-app}/styles.css (100%) diff --git a/examples/index.html b/examples/Weather-app/index.html similarity index 100% rename from examples/index.html rename to examples/Weather-app/index.html diff --git a/examples/script.js b/examples/Weather-app/script.js similarity index 100% rename from examples/script.js rename to examples/Weather-app/script.js diff --git a/examples/styles.css b/examples/Weather-app/styles.css similarity index 100% rename from examples/styles.css rename to examples/Weather-app/styles.css From 06bb00478657503f4bf50e35f77e3019aa324d14 Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 10:35:08 +0530 Subject: [PATCH 4/7] fix: updated weather app layout as suggested --- examples/Weather-app/index.html | 2 +- examples/Weather-app/script.js | 31 ++++++++++++++++++++++++++----- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/examples/Weather-app/index.html b/examples/Weather-app/index.html index e52a69ed..19d61e1a 100644 --- a/examples/Weather-app/index.html +++ b/examples/Weather-app/index.html @@ -3,7 +3,7 @@ - Document + Weather App diff --git a/examples/Weather-app/script.js b/examples/Weather-app/script.js index 9df30ea6..46f60311 100644 --- a/examples/Weather-app/script.js +++ b/examples/Weather-app/script.js @@ -6,7 +6,8 @@ const windspeed = document.querySelector(".windspeed"); const btn = document.querySelector(".srch-btn"); const cityOp = document.querySelector(".city-name-output"); -const apiKey = "6244ab888f079565d5ce1deabddc3f77"; +// IMPORTANT: Replace "YOUR_API_KEY" with your actual OpenWeatherMap API key."6244ab888f079565d5ce1deabddc3f77" +const apiKey = "YOUR_API_KEY"; async function getWeatherInfo(city) { try { console.log(city); @@ -15,11 +16,15 @@ async function getWeatherInfo(city) { } let res = await fetch( - `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}` + `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=6244ab888f079565d5ce1deabddc3f77` ); console.log(res); if (!res.ok) { - throw Error("Error occured.Could not find the city "); + 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); @@ -28,7 +33,6 @@ async function getWeatherInfo(city) { const { speed } = res.wind; const name = res.name; const desc = res.weather[0].main; - console.log(res.weather[0].description); assignWeatherDetails(speed, temp, humidity, feels_like, name, desc); } catch (e) { document.querySelector(".city-name-input").value = ""; @@ -50,9 +54,26 @@ function assignWeatherDetails(s, t, h, fl, n, 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("kurnool"); + getWeatherInfo("London"); }); From e5b25c2d5a2f24d329d553a5f13312cc81a5ba41 Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 10:36:07 +0530 Subject: [PATCH 5/7] fix: updated weather app layout as suggested --- examples/Weather-app/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/Weather-app/script.js b/examples/Weather-app/script.js index 46f60311..1fc6e389 100644 --- a/examples/Weather-app/script.js +++ b/examples/Weather-app/script.js @@ -16,7 +16,7 @@ async function getWeatherInfo(city) { } let res = await fetch( - `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=6244ab888f079565d5ce1deabddc3f77` + `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}` ); console.log(res); if (!res.ok) { From 57feb463b481a8d620e1da0c7a3d203819c34625 Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 10:37:10 +0530 Subject: [PATCH 6/7] fix: updated weather app layout as suggested --- examples/Weather-app/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/Weather-app/script.js b/examples/Weather-app/script.js index 1fc6e389..a97cab08 100644 --- a/examples/Weather-app/script.js +++ b/examples/Weather-app/script.js @@ -6,7 +6,7 @@ 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."6244ab888f079565d5ce1deabddc3f77" +// IMPORTANT: Replace "YOUR_API_KEY" with your actual OpenWeatherMap API key. const apiKey = "YOUR_API_KEY"; async function getWeatherInfo(city) { try { From 6dfd23052577ca710e24d18e84ae4752ba38d07e Mon Sep 17 00:00:00 2001 From: ArshadShaik07 Date: Sun, 5 Oct 2025 19:03:19 +0530 Subject: [PATCH 7/7] feat: add stopwatch app using JavaScript --- examples/Stopwatch-app/index.html | 21 ++++++++++++ examples/Stopwatch-app/script.js | 54 +++++++++++++++++++++++++++++++ examples/Stopwatch-app/styles.css | 51 +++++++++++++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 examples/Stopwatch-app/index.html create mode 100644 examples/Stopwatch-app/script.js create mode 100644 examples/Stopwatch-app/styles.css diff --git a/examples/Stopwatch-app/index.html b/examples/Stopwatch-app/index.html new file mode 100644 index 00000000..91ddd665 --- /dev/null +++ b/examples/Stopwatch-app/index.html @@ -0,0 +1,21 @@ + + + + + + Stopwatch + + + +
+
00:00:00
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/examples/Stopwatch-app/script.js b/examples/Stopwatch-app/script.js new file mode 100644 index 00000000..213b21bf --- /dev/null +++ b/examples/Stopwatch-app/script.js @@ -0,0 +1,54 @@ +const display = document.getElementById("display"); +const startBtn = document.getElementById("startBtn"); +const stopBtn = document.getElementById("stopBtn"); +const resetBtn = document.getElementById("resetBtn"); + +let startTime; +let elapsedTime = 0; +let timerInterval; +let running = false; + +function start() { + if (!running) { + startTime = Date.now() - elapsedTime; + timerInterval = setInterval(updateTime, 10); + running = true; + } +} + +function stop() { + if (running) { + clearInterval(timerInterval); + elapsedTime = Date.now() - startTime; + running = false; + } +} + +function reset() { + clearInterval(timerInterval); + elapsedTime = 0; + display.textContent = "00:00:00"; + running = false; +} + +function updateTime() { + const currentTime = Date.now(); + const currentElapsedTime = currentTime - startTime; + + let minutes = Math.floor(currentElapsedTime / (1000 * 60)); + let seconds = Math.floor((currentElapsedTime % (1000 * 60)) / 1000); + let milliseconds = Math.floor((currentElapsedTime % 1000) / 10); + + display.textContent = `${pad(minutes)}:${pad(seconds)}:${pad( + milliseconds + )}`; +} + +function pad(number) { + // Add a leading zero if the number is less than 10 + return number < 10 ? "0" + number : number; +} + +startBtn.addEventListener("click", start); +stopBtn.addEventListener("click", stop); +resetBtn.addEventListener("click", reset); diff --git a/examples/Stopwatch-app/styles.css b/examples/Stopwatch-app/styles.css new file mode 100644 index 00000000..67f89c85 --- /dev/null +++ b/examples/Stopwatch-app/styles.css @@ -0,0 +1,51 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + font-family: 'Arial', sans-serif; +} + +.stopwatch { + text-align: center; + background-color: white; + padding: 40px; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0,0,0,0.1); + width: 90%; + max-width: 400px; +} + +#display { + font-size: 3.5rem; + font-weight: bold; + margin-bottom: 20px; + color: #333; + font-family: 'Courier New', Courier, monospace; +} + +.buttons { + display: flex; + justify-content: center; + gap: 15px; +} + +.buttons button { + font-size: 1.2rem; + padding: 10px 20px; + border: none; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s, transform 0.1s; + color: white; +} + +#startBtn { background-color: #28a745; } +#stopBtn { background-color: #dc3545; } +#resetBtn { background-color: #007bff; } + +.buttons button:hover { + opacity: 0.9; +}