Skip to content

Added a simple Stopwatch App using HTML, CSS, and JavaScript (#324) #334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sumn2u merged 8 commits into from
Oct 6, 2025
Merged

Added a simple Stopwatch App using HTML, CSS, and JavaScript (#324) #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9a7775a
Add weather app to fetch and display weather by city name
ArshadShaik07 Oct 4, 2025
8f3c275
Add weather app to fetch and display weather by city name
ArshadShaik07 Oct 4, 2025
9d5bc00
Add weather app to fetch and display weather by city name
ArshadShaik07 Oct 4, 2025
06bb004
fix: updated weather app layout as suggested
ArshadShaik07 Oct 5, 2025
e5b25c2
fix: updated weather app layout as suggested
ArshadShaik07 Oct 5, 2025
57feb46
fix: updated weather app layout as suggested
ArshadShaik07 Oct 5, 2025
6dfd230
feat: add stopwatch app using JavaScript
ArshadShaik07 Oct 5, 2025
e386183
Merge branch 'main' into feature/stopwatch-app
sumn2u Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions examples/Stopwatch-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
54 changes: 54 additions & 0 deletions examples/Stopwatch-app/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The elapsedTime calculation in stop() function is incorrect. It should preserve the accumulated elapsed time, not recalculate from startTime.

Suggested change
elapsedTime = Date.now() - startTime;
elapsedTime += Date.now() - startTime;

Copilot uses AI. Check for mistakes.
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);
51 changes: 51 additions & 0 deletions examples/Stopwatch-app/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}