Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1ee722c

Browse files
Timer Using HTML, CSS and JAVASCRIPT
1 parent 373def4 commit 1ee722c

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎85. Timer/app.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Create Template Variables
2+
const INTERVAL_MS = 1000 / 60;
3+
let timerID;
4+
let lastTimerStartTime = 0;
5+
let millisElapsedBeforeLastStart = 0;
6+
7+
// Get Our Data From The DOM
8+
const timer = document.getElementById("timer");
9+
const startButton = document.getElementById("start-button");
10+
const stopButton = document.getElementById("stop-button");
11+
const resetButton = document.getElementById("reset-button");
12+
13+
// USE EVENTS
14+
startButton.addEventListener("click", startTimer);
15+
stopButton.addEventListener("click", stopTimer);
16+
resetButton.addEventListener("click", resetTimers);
17+
18+
// ---- CREATING A FUNCTIONS ----
19+
20+
// 1. startTimer
21+
function startTimer() {
22+
startButton.disabled = true;
23+
stopButton.disabled = false;
24+
resetButton.disabled = true;
25+
26+
lastTimerStartTime = Date.now();
27+
timerID = setInterval(updateTimer, INTERVAL_MS);
28+
}
29+
30+
// 2. stopTimer
31+
function stopTimer() {
32+
startButton.disabled = false;
33+
stopButton.disabled = true;
34+
resetButton.disabled = false;
35+
36+
millisElapsedBeforeLastStart += Date.now() - lastTimerStartTime;
37+
clearInterval(timerID);
38+
}
39+
40+
// 3. resetTimer
41+
function resetTimers() {
42+
resetButton.disabled = true;
43+
timer.textContent = "00:00:00";
44+
millisElapsedBeforeLastStart = 0;
45+
}
46+
47+
// 4. updateTimer
48+
function updateTimer() {
49+
const milllisElapsed =
50+
Date.now() - lastTimerStartTime + millisElapsedBeforeLastStart;
51+
const secondsElapsed = milllisElapsed / 1000;
52+
const minutesElapsed = secondsElapsed / 60;
53+
54+
const millisText = formateNumber(milllisElapsed % 1000, 3);
55+
const secondsText = formateNumber(Math.floor(secondsElapsed) % 60, 2);
56+
const minutesText = formateNumber(Math.floor(minutesElapsed), 2);
57+
timer.textContent = `${minutesText}:${secondsText}:${millisText}`;
58+
}
59+
60+
// 5. formatNumber
61+
function formateNumber(number, desiredLength) {
62+
const stringNumber = String(number);
63+
if (stringNumber.length > desiredLength) {
64+
return stringNumber.slice(0, desiredLength);
65+
}
66+
67+
return stringNumber.padStart(desiredLength, "0");
68+
}

‎85. Timer/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Timer</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section id="stopwatch">
11+
<h1>Stop Watch</h1>
12+
<div id="timer" role="timer">00:00:00</div>
13+
<div class="btns-container">
14+
<button id="start-button">Start</button>
15+
<button id="stop-button">Stop</button>
16+
<button id="reset-button">Reset</button>
17+
</div>
18+
</section>
19+
20+
<script src="app.js"></script>
21+
</body>
22+
</html>

‎85. Timer/style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
background: linear-gradient(to right, #21d4fd, #b721ff);
12+
}
13+
14+
section {
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: center;
18+
align-items: center;
19+
}
20+
21+
section h1 {
22+
font-size: 4rem;
23+
font-family: sans-serif;
24+
margin: 20px;
25+
color: #fff;
26+
text-transform: uppercase;
27+
}
28+
29+
section #timer {
30+
font-size: 4rem;
31+
margin: 20px;
32+
}
33+
34+
section button {
35+
background: transparent;
36+
border: none;
37+
padding: 10px 20px;
38+
}
39+
40+
button {
41+
margin: 10px;
42+
color: #fff;
43+
width: 6rem;
44+
cursor: pointer;
45+
}
46+
47+
#start-button {
48+
background: #71e027;
49+
}
50+
51+
#stop-button {
52+
background: crimson;
53+
}
54+
55+
#reset-button {
56+
background: darkblue;
57+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /