sumn2u · sumn2u · Oct 6, 2025 · Oct 4, 2025 · Oct 4, 2025 · Oct 4, 2025
diff --git a/examples/Stopwatch-app/index.html b/examples/Stopwatch-app/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="stopwatch">
+        <div id="display">00:00:00</div>
+        <div class="buttons">
+            <button id="startBtn">Start</button>
+            <button id="stopBtn">Stop</button>
+            <button id="resetBtn">Reset</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/Stopwatch-app/script.js 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;
-		elapsedTime = Date.now() - startTime;
+		elapsedTime += Date.now() - startTime;
-		elapsedTime = Date.now() - startTime;
+		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
@@ -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;
+}
diff --git a/examples/Weather-app/index.html b/examples/Weather-app/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="./styles.css"/>
+</head>
+<body>
+    <h1>Weather App</h1>
+    <div class="parent-container" ><!-- main div -->
+        <div class="inputs-container">
+            <input placeholder="enter city name" class="city-name-input"/>
+            <button class="srch-btn">Search weather</button>
+        </div>
+        <div class="outputs-container">
+            <div class="city-name-output">city</div>
+            <div class="temp-container">Temperature<p class="temperature"></p></div>
+            <div class="text-container-parent">
+                <div >Feels like<p class="feels-like"></p></div>
+                <div >Humidity<p class="humidity"></p></div>
+                <div>Windspeed<p class="windspeed"></p></div>
+            </div>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/examples/Weather-app/script.js 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 ");
-				throw Error("Access denied.Check your api key ");
+				throw Error("Access denied. Check your api key ");
-				throw Error("Access denied.Check your api key ");
+				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 + "<sup>o</sup>C" + `<p>${desc}</p>`;
+	humidity.innerHTML = h;
+	feels_like.innerHTML = fl + "<sup>o</sup>C";
+	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", "<sup>o</sup>C");
+	const descPara = document.createElement("p");
+	descPara.textContent = desc;
+	temp.appendChild(descPara);
+
+	feels_like.textContent = fl;
+	feels_like.insertAdjacentHTML("beforeend", "<sup>o</sup>C");
+
+	city.value = "";
+}
+
+window.addEventListener("load", () => {
+	getWeatherInfo("London");
+});