From 4eb60d82c62aa64d236689fff765ad73acc977ad Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:19:16 +0530 Subject: [PATCH 1/7] create the template for the project --- Source-Code/StopWatch/index.html | 11 +++++++++++ Source-Code/StopWatch/script.js | 0 Source-Code/StopWatch/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/StopWatch/index.html create mode 100644 Source-Code/StopWatch/script.js create mode 100644 Source-Code/StopWatch/style.css diff --git a/Source-Code/StopWatch/index.html b/Source-Code/StopWatch/index.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/Source-Code/StopWatch/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/Source-Code/StopWatch/script.js b/Source-Code/StopWatch/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/StopWatch/style.css b/Source-Code/StopWatch/style.css new file mode 100644 index 0000000..e69de29 From 9da8e0c33f2b6194ca0cef33288517fcbd0a0abc Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:25:40 +0530 Subject: [PATCH 2/7] Add buttons --- Source-Code/StopWatch/index.html | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/Source-Code/StopWatch/index.html b/Source-Code/StopWatch/index.html index d01f779..c737af1 100644 --- a/Source-Code/StopWatch/index.html +++ b/Source-Code/StopWatch/index.html @@ -1,11 +1,23 @@ - - - Document + + + Stop watch + - +
+

Stopwatch

+
+ 00:00:00 +
+
+ + + +
+
+ - \ No newline at end of file + From 1300d04b913b131fcc703840f795f1a1fc424327 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:26:18 +0530 Subject: [PATCH 3/7] add segmantic tags --- Source-Code/StopWatch/index.html | 41 +++++++++++++++++--------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/Source-Code/StopWatch/index.html b/Source-Code/StopWatch/index.html index c737af1..a53e825 100644 --- a/Source-Code/StopWatch/index.html +++ b/Source-Code/StopWatch/index.html @@ -1,23 +1,26 @@ - - - - Stop watch - - - -
-

Stopwatch

-
- 00:00:00 + + + + Stop watch + + + +
+

Stopwatch

+
+ 00:00:00 +
+
+ + + +
-
- - - -
-
- - + + From 2096c03c1636c1bd32f3943c99e1f0333ee44cb2 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:28:22 +0530 Subject: [PATCH 4/7] Add styles --- Source-Code/StopWatch/style.css | 45 +++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/Source-Code/StopWatch/style.css b/Source-Code/StopWatch/style.css index e69de29..75cfd81 100644 --- a/Source-Code/StopWatch/style.css +++ b/Source-Code/StopWatch/style.css @@ -0,0 +1,45 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #2e2a2a; + margin: 0; + font-family: Arial, sans-serif; + } + + .container { + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; + } + + .stopwatch, h1, span{ + color: aliceblue; + } + .stopwatch { + font-size: 48px; + margin-bottom: 20px; + } + + .buttons { + display: flex; + justify-content: center; + gap: 10px; + } + + button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #007BFF; + color: #fff; + } + + button:active { + background-color: #0056b3; + } + \ No newline at end of file From eb3cdafe3ca308822b78cabb7711262b9e5637d6 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:28:37 +0530 Subject: [PATCH 5/7] Add functionality --- Source-Code/StopWatch/script.js | 49 +++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/Source-Code/StopWatch/script.js b/Source-Code/StopWatch/script.js index e69de29..bc76c00 100644 --- a/Source-Code/StopWatch/script.js +++ b/Source-Code/StopWatch/script.js @@ -0,0 +1,49 @@ +let milliseconds = 0; +let seconds = 0; +let minutes = 0; +let timer; + +const startButton = document.getElementById("start"); +const stopButton = document.getElementById("stop"); +const resetButton = document.getElementById("reset"); + +const updateTime = () => { + milliseconds += 1; + if (milliseconds === 100) { + milliseconds = 0; + seconds += 1; + } + if (seconds === 60) { + seconds = 0; + minutes += 1; + } + document.getElementById("milliseconds").innerText = + milliseconds < 10 ? `0${milliseconds}` : milliseconds; + document.getElementById("seconds").innerText = + seconds < 10 ? `0${seconds}` : seconds; + document.getElementById("minutes").innerText = + minutes < 10 ? `0${minutes}` : minutes; +}; + +const startTimer = () => { + clearInterval(timer); + timer = setInterval(updateTime, 10); +}; + +const stopTimer = () => { + clearInterval(timer); +}; + +const resetTimer = () => { + clearInterval(timer); + milliseconds = 0; + seconds = 0; + minutes = 0; + document.getElementById("milliseconds").innerText = "00"; + document.getElementById("seconds").innerText = "00"; + document.getElementById("minutes").innerText = "00"; +}; + +startButton.addEventListener("click", startTimer); +stopButton.addEventListener("click", stopTimer); +resetButton.addEventListener("click", resetTimer); From ec3cd7b1ba467dd98fa455ecf9971f5841f99698 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:29:44 +0530 Subject: [PATCH 6/7] solve linter error --- Source-Code/StopWatch/script.js | 27 +++++----- Source-Code/StopWatch/style.css | 90 +++++++++++++++++---------------- 2 files changed, 58 insertions(+), 59 deletions(-) diff --git a/Source-Code/StopWatch/script.js b/Source-Code/StopWatch/script.js index bc76c00..c37cbe9 100644 --- a/Source-Code/StopWatch/script.js +++ b/Source-Code/StopWatch/script.js @@ -3,9 +3,9 @@ let seconds = 0; let minutes = 0; let timer; -const startButton = document.getElementById("start"); -const stopButton = document.getElementById("stop"); -const resetButton = document.getElementById("reset"); +const startButton = document.getElementById('start'); +const stopButton = document.getElementById('stop'); +const resetButton = document.getElementById('reset'); const updateTime = () => { milliseconds += 1; @@ -17,12 +17,9 @@ const updateTime = () => { seconds = 0; minutes += 1; } - document.getElementById("milliseconds").innerText = - milliseconds < 10 ? `0${milliseconds}` : milliseconds; - document.getElementById("seconds").innerText = - seconds < 10 ? `0${seconds}` : seconds; - document.getElementById("minutes").innerText = - minutes < 10 ? `0${minutes}` : minutes; + document.getElementById('milliseconds').innerText = milliseconds < 10 ? `0${milliseconds}` : milliseconds; + document.getElementById('seconds').innerText = seconds < 10 ? `0${seconds}` : seconds; + document.getElementById('minutes').innerText = minutes < 10 ? `0${minutes}` : minutes; }; const startTimer = () => { @@ -39,11 +36,11 @@ const resetTimer = () => { milliseconds = 0; seconds = 0; minutes = 0; - document.getElementById("milliseconds").innerText = "00"; - document.getElementById("seconds").innerText = "00"; - document.getElementById("minutes").innerText = "00"; + document.getElementById('milliseconds').innerText = '00'; + document.getElementById('seconds').innerText = '00'; + document.getElementById('minutes').innerText = '00'; }; -startButton.addEventListener("click", startTimer); -stopButton.addEventListener("click", stopTimer); -resetButton.addEventListener("click", resetTimer); +startButton.addEventListener('click', startTimer); +stopButton.addEventListener('click', stopTimer); +resetButton.addEventListener('click', resetTimer); diff --git a/Source-Code/StopWatch/style.css b/Source-Code/StopWatch/style.css index 75cfd81..1f6d343 100644 --- a/Source-Code/StopWatch/style.css +++ b/Source-Code/StopWatch/style.css @@ -1,45 +1,47 @@ body { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background-color: #2e2a2a; - margin: 0; - font-family: Arial, sans-serif; - } - - .container { - display: flex; - flex-direction: column; - justify-items: center; - align-items: center; - } - - .stopwatch, h1, span{ - color: aliceblue; - } - .stopwatch { - font-size: 48px; - margin-bottom: 20px; - } - - .buttons { - display: flex; - justify-content: center; - gap: 10px; - } - - button { - padding: 10px 20px; - font-size: 16px; - cursor: pointer; - border: none; - border-radius: 5px; - background-color: #007BFF; - color: #fff; - } - - button:active { - background-color: #0056b3; - } - \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #2e2a2a; + margin: 0; + font-family: Arial, sans-serif; +} + +.container { + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; +} + +.stopwatch, +h1, +span { + color: aliceblue; +} + +.stopwatch { + font-size: 48px; + margin-bottom: 20px; +} + +.buttons { + display: flex; + justify-content: center; + gap: 10px; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #007bff; + color: #fff; +} + +button:active { + background-color: #0056b3; +} From 2b97e095c50c0fca998b656b8cf7c1e82910214b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 29 Jul 2024 22:32:20 +0530 Subject: [PATCH 7/7] Add project --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 88563cf..fac6b93 100644 --- a/README.md +++ b/README.md @@ -331,6 +331,17 @@ In order to run this project you need: +
  • +
    +Stop Watch +

    This project is a simple and interactive stopwatch application created using HTML, CSS, and JavaScript. The stopwatch can be started, stopped, and reset, allowing users to measure elapsed time accurately. It displays minutes, seconds, and milliseconds, providing a clear and precise time tracking interface. The application is styled with CSS for a clean and modern look, and it is fully responsive, ensuring usability across different devices.

    + +
    +
    • +

    (back to top)