From 2d5ea3f07b79257c0e0b6594db53d0d09893fbe3 Mon Sep 17 00:00:00 2001 From: Sidd <92375052+Siddharthmarko@users.noreply.github.com> Date: Thu, 12 Oct 2023 08:41:44 +0530 Subject: [PATCH] Add files via upload --- Stopwatch/index.html | 42 ++++++++++++ Stopwatch/javascript.js | 137 ++++++++++++++++++++++++++++++++++++++++ Stopwatch/style.css | 116 ++++++++++++++++++++++++++++++++++ 3 files changed, 295 insertions(+) create mode 100644 Stopwatch/index.html create mode 100644 Stopwatch/javascript.js create mode 100644 Stopwatch/style.css diff --git a/Stopwatch/index.html b/Stopwatch/index.html new file mode 100644 index 0000000..40ab733 --- /dev/null +++ b/Stopwatch/index.html @@ -0,0 +1,42 @@ + + + + + + + + Document + + + + + +
+
+
+ +

Stopwatch

+
+
+

00

+
+

00

+
+

00

+
+
+ + + +
+
+
+

Laps

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/Stopwatch/javascript.js b/Stopwatch/javascript.js new file mode 100644 index 0000000..9bc5767 --- /dev/null +++ b/Stopwatch/javascript.js @@ -0,0 +1,137 @@ +function StopWatch(element, action) { + this.element = + element instanceof Element ? element : document.querySelector(element); + + this.action = action; + + let startTime = null; + let isRunning = false; + let interval = null; + let savedTime = null; + let lapCount = 0; + this.laps = []; + + // Elements + + let minuteEl = this.element.querySelector(".minute"); + let secondEl = this.element.querySelector(".second"); + let millisecondEl = this.element.querySelector(".millisecond"); + const lapCont = this.element.querySelector(".laps"); + + // Function + + this.start = (currentBtn) => { + if (isRunning) return this.stop(currentBtn); + isRunning = true; + startTime = new Date().getTime(); + getTime(); + currentBtn.innerHTML = `Stop`; + }; + + this.stop = (currentBtn) => { + isRunning = false; + stopTime = new Date().getTime(); + clearInterval(interval); + interval = null; + savedTime = time.getTime(); + currentBtn.innerHTML = `Resume`; + }; + + this.lap = () => { + if (isRunning) updateTime(true); + updateLap(); + }; + + this.reset = (currentBtn) => { + isRunning = false; + clearInterval(interval); + interval = null; + startTime = null; + stopTime = null; + interval = null; + savedTime = null; + currentBtn.innerHTML = `Start`; + updateDOM(); + this.laps = []; + updateLap(); + }; + + function getTime() { + interval = setInterval(updateTime.bind(this), 100); + } + + function updateTime(laps) { + let currentTime = new Date().getTime(); + + if (savedTime) time = new Date(currentTime - startTime + savedTime); + else time = new Date(currentTime - startTime); + + setTime(time, laps); + } + + function setTime(time, lap) { + let minuteHolder = time.getMinutes(); + let minute = minuteHolder < 30 ? minuteHolder : minuteHolder - 30; + let second = time.getSeconds(); + let millisecond = time.getMilliseconds(); + formatTime(minute, second, millisecond, lap); + } + + formatTime = (minute, second, millisecond, lap) => { + let minuteText = minute <= 9 ? `0${minute}` : `${minute}`; + let secondText = second <= 9 ? `0${second}` : `${second}`; + let millisecondText = + Math.floor(millisecond / 11) <= 9 + ? `0${Math.floor(millisecond / 11)}` + : `${Math.floor(millisecond / 11)}`; + + if (!lap) updateDOM(minuteText, secondText, millisecondText); + else this.laps.push(`${minuteText}:${secondText}:${millisecondText}`); + }; + + function updateDOM( + minuteText = `00`, + secondText = `00`, + millisecondText = `00` + ) { + minuteEl.innerHTML = minuteText; + secondEl.innerHTML = secondText; + millisecondEl.innerHTML = millisecondText; + } + + updateLap = () => { + lapCont.innerHTML = null; + lapCount = 0; + this.laps.forEach((lap) => createLapEl(lap)); + }; + + createLapEl = (lapTime) => { + const lapEl = document.createElement("div"); + lapEl.className = `lap`; + const lapPara = document.createElement("p"); + lapEl.appendChild(lapPara); + lapPara.innerHTML = `${lapCount <= 9 ? `0${lapCount}` : `${lapCount}` + } - ${lapTime}`; + lapCont.prepend(lapEl); + lapCount++; + }; + + // Event Listener + + const { start: startEl, reset: resetEl, lapEl: lapBtn } = this.action; + + startEl.addEventListener("click", () => this.start(startBtn)); + resetEl.addEventListener("click", () => this.reset(startBtn)); + lapBtn.addEventListener("click", () => this.lap()); +} + +const stopwatchEl = document.getElementById("stopwatch"); +const startBtn = document.getElementById("start"); +const resetBtn = document.getElementById("reset"); +const lapBtn = document.getElementById("lap"); + +const stopWatch = new StopWatch(stopwatch, { + start: startBtn, + reset: resetBtn, + lapEl: lapBtn, +}); \ No newline at end of file diff --git a/Stopwatch/style.css b/Stopwatch/style.css new file mode 100644 index 0000000..260b08d --- /dev/null +++ b/Stopwatch/style.css @@ -0,0 +1,116 @@ +@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@200;300;600;700;800&display=swap"); + +* { + margin: 0%; + padding: 0%; + box-sizing: border-box; + font-family: "Overpass", sans-serif; +} +body { + background-color: aliceblue; + display: flex; + align-items: center; + justify-content: center; +} +body section { + width: 90%; + max-width: 500px; + margin-top: 1.5rem; +} +body section header { + display: flex; + align-items: center; +} +body section header h1 { + font-size: 2rem; + margin-left: 5px; + margin-top: 6px; + color: #a14f4f; + position: relative; +} + +body section header img { + width: 35px; +} +body section .timer { + display: flex; + align-items: center; + justify-content: center; + margin-top: 2.5rem; +} +body section .timer h1 { + font-size: 5rem; + font-weight: bolder; + width: 110px; + display: flex; + align-items: center; + justify-content: center; + color: rgb(48, 48, 48); +} +body section .timer .colon { + height: 10px; + width: 10px; + background-color: rgb(48, 48, 48); + position: relative; + margin: 0 5px; + border-radius: 4px; +} +body section .timer .colon:nth-child(2):after { + content: ""; + height: 100%; + width: 100%; + background-color: rgb(48, 48, 48); + position: absolute; + border-radius: 4px; + top: -20px; +} +body section .ctaBtns { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin-top: 1.5rem; +} +body section .ctaBtns button { + padding: 0.475rem 1.5rem; + font-size: 1rem; + line-height: 1.5; + border: none; + outline: none; + cursor: pointer; + background: #0d6efd; + color: #fff; + width: fit-content; + border-radius: 0.25rem; + margin: 0% auto; +} +body section .ctaBtns .reset { + background: #b02a37; +} +body section .ctaBtns .lapBtn { + background: #61428f; +} +body section .lapsCont { + margin-top: 2rem; +} +body section .lapsCont header { + margin: 1rem 0; +} +body section .laps { + display: flex; + flex-direction: column; + justify-content: flex-start; +} +body section .laps .lap { + background-color: #61428f; + padding: 1rem; + margin: 5px 0; + border-radius: 0.25rem; +} +body section .laps .lap p { + color: #fff; +} + +@media (max-width: 500px) { + body section .timer h1 { + font-size: 4rem; + } +} \ No newline at end of file