Skip to content

Commit 595ea65

Browse files
ArshadShaik07sumn2u
ArshadShaik07
and
sumn2u
authored
Added a simple Stopwatch App using HTML, CSS, and JavaScript (#324) (#334)
* Add weather app to fetch and display weather by city name * Add weather app to fetch and display weather by city name * Add weather app to fetch and display weather by city name * fix: updated weather app layout as suggested * fix: updated weather app layout as suggested * fix: updated weather app layout as suggested * feat: add stopwatch app using JavaScript --------- Co-authored-by: Suman Kunwar <[email protected]>
1 parent a26b654 commit 595ea65

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

‎examples/Stopwatch-app/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Stopwatch</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="stopwatch">
11+
<div id="display">00:00:00</div>
12+
<div class="buttons">
13+
<button id="startBtn">Start</button>
14+
<button id="stopBtn">Stop</button>
15+
<button id="resetBtn">Reset</button>
16+
</div>
17+
</div>
18+
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎examples/Stopwatch-app/script.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const display = document.getElementById("display");
2+
const startBtn = document.getElementById("startBtn");
3+
const stopBtn = document.getElementById("stopBtn");
4+
const resetBtn = document.getElementById("resetBtn");
5+
6+
let startTime;
7+
let elapsedTime = 0;
8+
let timerInterval;
9+
let running = false;
10+
11+
function start() {
12+
if (!running) {
13+
startTime = Date.now() - elapsedTime;
14+
timerInterval = setInterval(updateTime, 10);
15+
running = true;
16+
}
17+
}
18+
19+
function stop() {
20+
if (running) {
21+
clearInterval(timerInterval);
22+
elapsedTime = Date.now() - startTime;
23+
running = false;
24+
}
25+
}
26+
27+
function reset() {
28+
clearInterval(timerInterval);
29+
elapsedTime = 0;
30+
display.textContent = "00:00:00";
31+
running = false;
32+
}
33+
34+
function updateTime() {
35+
const currentTime = Date.now();
36+
const currentElapsedTime = currentTime - startTime;
37+
38+
let minutes = Math.floor(currentElapsedTime / (1000 * 60));
39+
let seconds = Math.floor((currentElapsedTime % (1000 * 60)) / 1000);
40+
let milliseconds = Math.floor((currentElapsedTime % 1000) / 10);
41+
42+
display.textContent = `${pad(minutes)}:${pad(seconds)}:${pad(
43+
milliseconds
44+
)}`;
45+
}
46+
47+
function pad(number) {
48+
// Add a leading zero if the number is less than 10
49+
return number < 10 ? "0" + number : number;
50+
}
51+
52+
startBtn.addEventListener("click", start);
53+
stopBtn.addEventListener("click", stop);
54+
resetBtn.addEventListener("click", reset);

‎examples/Stopwatch-app/styles.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background-color: #f0f0f0;
8+
font-family: 'Arial', sans-serif;
9+
}
10+
11+
.stopwatch {
12+
text-align: center;
13+
background-color: white;
14+
padding: 40px;
15+
border-radius: 15px;
16+
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
17+
width: 90%;
18+
max-width: 400px;
19+
}
20+
21+
#display {
22+
font-size: 3.5rem;
23+
font-weight: bold;
24+
margin-bottom: 20px;
25+
color: #333;
26+
font-family: 'Courier New', Courier, monospace;
27+
}
28+
29+
.buttons {
30+
display: flex;
31+
justify-content: center;
32+
gap: 15px;
33+
}
34+
35+
.buttons button {
36+
font-size: 1.2rem;
37+
padding: 10px 20px;
38+
border: none;
39+
border-radius: 8px;
40+
cursor: pointer;
41+
transition: background-color 0.3s, transform 0.1s;
42+
color: white;
43+
}
44+
45+
#startBtn { background-color: #28a745; }
46+
#stopBtn { background-color: #dc3545; }
47+
#resetBtn { background-color: #007bff; }
48+
49+
.buttons button:hover {
50+
opacity: 0.9;
51+
}

0 commit comments

Comments
 (0)