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)

    diff --git a/Source-Code/StopWatch/index.html b/Source-Code/StopWatch/index.html new file mode 100644 index 0000000..a53e825 --- /dev/null +++ b/Source-Code/StopWatch/index.html @@ -0,0 +1,26 @@ + + + + + + Stop watch + + + +
    +

    Stopwatch

    +
    + 00:00:00 +
    +
    + + + +
    +
    + + + diff --git a/Source-Code/StopWatch/script.js b/Source-Code/StopWatch/script.js new file mode 100644 index 0000000..c37cbe9 --- /dev/null +++ b/Source-Code/StopWatch/script.js @@ -0,0 +1,46 @@ +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); diff --git a/Source-Code/StopWatch/style.css b/Source-Code/StopWatch/style.css new file mode 100644 index 0000000..1f6d343 --- /dev/null +++ b/Source-Code/StopWatch/style.css @@ -0,0 +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; +}