Timer Using HTML, CSS and JAVASCRIPT

HuXn-WebDev · HuXn-WebDev · commit 1ee722ce10bf · 2022-10-17T05:57:35.000-07:00
diff --git a/85. Timer/app.js b/85. Timer/app.js
@@ -0,0 +1,68 @@
+// Create Template Variables
+const INTERVAL_MS = 1000 / 60;
+let timerID;
+let lastTimerStartTime = 0;
+let millisElapsedBeforeLastStart = 0;
+
+// Get Our Data From The DOM
+const timer = document.getElementById("timer");
+const startButton = document.getElementById("start-button");
+const stopButton = document.getElementById("stop-button");
+const resetButton = document.getElementById("reset-button");
+
+// USE EVENTS
+startButton.addEventListener("click", startTimer);
+stopButton.addEventListener("click", stopTimer);
+resetButton.addEventListener("click", resetTimers);
+
+// ---- CREATING A FUNCTIONS ----
+
+// 1. startTimer
+function startTimer() {
+  startButton.disabled = true;
+  stopButton.disabled = false;
+  resetButton.disabled = true;
+
+  lastTimerStartTime = Date.now();
+  timerID = setInterval(updateTimer, INTERVAL_MS);
+}
+
+// 2. stopTimer
+function stopTimer() {
+  startButton.disabled = false;
+  stopButton.disabled = true;
+  resetButton.disabled = false;
+
+  millisElapsedBeforeLastStart += Date.now() - lastTimerStartTime;
+  clearInterval(timerID);
+}
+
+// 3. resetTimer
+function resetTimers() {
+  resetButton.disabled = true;
+  timer.textContent = "00:00:00";
+  millisElapsedBeforeLastStart = 0;
+}
+
+// 4. updateTimer
+function updateTimer() {
+  const milllisElapsed =
+    Date.now() - lastTimerStartTime + millisElapsedBeforeLastStart;
+  const secondsElapsed = milllisElapsed / 1000;
+  const minutesElapsed = secondsElapsed / 60;
+
+  const millisText = formateNumber(milllisElapsed % 1000, 3);
+  const secondsText = formateNumber(Math.floor(secondsElapsed) % 60, 2);
+  const minutesText = formateNumber(Math.floor(minutesElapsed), 2);
+  timer.textContent = `${minutesText}:${secondsText}:${millisText}`;
+}
+
+// 5. formatNumber
+function formateNumber(number, desiredLength) {
+  const stringNumber = String(number);
+  if (stringNumber.length > desiredLength) {
+    return stringNumber.slice(0, desiredLength);
+  }
+
+  return stringNumber.padStart(desiredLength, "0");
+}
diff --git a/85. Timer/index.html b/85. Timer/index.html
@@ -0,0 +1,22 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Timer</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section id="stopwatch">
+      <h1>Stop Watch</h1>
+      <div id="timer" role="timer">00:00:00</div>
+      <div class="btns-container">
+        <button id="start-button">Start</button>
+        <button id="stop-button">Stop</button>
+        <button id="reset-button">Reset</button>
+      </div>
+    </section>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/85. Timer/style.css b/85. Timer/style.css
@@ -0,0 +1,57 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(to right, #21d4fd, #b721ff);
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+section h1 {
+  font-size: 4rem;
+  font-family: sans-serif;
+  margin: 20px;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+section #timer {
+  font-size: 4rem;
+  margin: 20px;
+}
+
+section button {
+  background: transparent;
+  border: none;
+  padding: 10px 20px;
+}
+
+button {
+  margin: 10px;
+  color: #fff;
+  width: 6rem;
+  cursor: pointer;
+}
+
+#start-button {
+  background: #71e027;
+}
+
+#stop-button {
+  background: crimson;
+}
+
+#reset-button {
+  background: darkblue;
+}
