├── README.md
├── index.html
├── styles.css
└── index.js
/README.md:
--------------------------------------------------------------------------------
1 | # stopWatch-using-html-cs-js
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | stop watch
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 |
6 | }
7 |
8 | body {
9 | width: 100%;
10 | height: 100vh;
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | background: linear-gradient(45deg, #0a0a0a, #3a4452);
15 | color: white;
16 | opacity: 0.7;
17 | flex-direction: column;
18 | }
19 |
20 |
21 | #timer {
22 | background-color: #0a0a0a;
23 | padding: 20px 24px;
24 | border-radius: 10px;
25 | font-size: 70px;
26 | font-weight: 600;
27 | }
28 |
29 | .button {
30 | display: flex;
31 | justify-content: center;
32 | align-items: center;
33 | margin-top: 20px;
34 |
35 | }
36 |
37 | .btn {
38 | font-size: 20px;
39 | background: none;
40 | border: none;
41 | color: white;
42 | padding: 12px 24px;
43 | margin-inline: 12px;
44 | border-radius: 30%;
45 | cursor: pointer;
46 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // Get the timer display and buttons
2 | let timer = document.getElementById('timer');
3 | let startButton = document.getElementById('red');
4 | let stopButton = document.getElementById('green');
5 | let resetButton = document.getElementById('blue');
6 |
7 | // Initialize variables for time
8 | let msec = 0;
9 | let secs = 0;
10 | let mins = 0;
11 | let timerId = null;
12 |
13 | // Add click event listeners for buttons
14 | startButton.addEventListener('click', function () {
15 | if (timerId === null) {
16 | timerId = setInterval(startTimer, 10);
17 | }
18 | });
19 |
20 | stopButton.addEventListener('click', function () {
21 | clearInterval(timerId);
22 | timerId = null; // Reset the timer ID
23 | });
24 |
25 | resetButton.addEventListener('click', function () {
26 | clearInterval(timerId);
27 | timerId = null; // Reset the timer ID
28 | msec = 0;
29 | secs = 0;
30 | mins = 0;
31 | updateTimerDisplay();
32 | });
33 |
34 | // Function to update the timer display
35 | function updateTimerDisplay() {
36 | let msecString = msec < 10 ? `0${msec}` : msec;
37 | let secsString = secs < 10 ? `0${secs}` : secs;
38 | let minsString = mins < 10 ? `0${mins}` : mins;
39 | timer.innerHTML = `${minsString} : ${secsString} : ${msecString}`;
40 | }
41 |
42 | // Function to start the timer
43 | function startTimer() {
44 | msec++;
45 | if (msec === 100) {
46 | msec = 0;
47 | secs++;
48 | if (secs === 60) {
49 | secs = 0;
50 | mins++;
51 | }
52 | }
53 | updateTimerDisplay();
54 | }
55 |
56 | // Initial display
57 | updateTimerDisplay();
58 |
--------------------------------------------------------------------------------