first commit

oge-dev · Jul 18, 2023 · 1b81c49 · 1b81c49
commit 1b81c49
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<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>TempoKeeper</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>TEMPOKEEPER</h1>
+    </header>
+    <main>
+      <section class="date-time">
+        <h2>CURRENT DATE AND TIME:</h2>
+        <div class="clock">
+          <span id="hrs"></span>
+        </div>
+      </section>
+
+      <section class="stopwatch">
+        <h2>Stop Watch</h2>
+        <div class="container">
+          <div class="parameters">
+            <label id="hours">00</label>
+            <label id="boubleDots">:</label>
+            <label id="minutes">00</label>
+            <label id="boubleDots">:</label>
+            <label id="seconds">00</label>
+            <br />
+            <button class="btn" type="button" id="start">Start</button>
+            <button class="btn" type="button" id="stopTimer">Stop</button>
+            <button class="btn" type="button" id="reset">Reset</button>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,85 @@
+'use strict';
+
+
+function my() {
+    var date = new Date();
+
+    document.getElementById("hrs").innerHTML = date;
+    }
+
+  setInterval(my, 10)
+
+
+
+
+
+
+
+
+
+//values printed
+const secondsElt = document.getElementById('seconds');
+const minutesElt = document.getElementById('minutes');
+const hoursElt = document.getElementById('hours');
+let startButton = document.getElementById("start");
+
+//initial values
+let secondsNumner = 0;
+let minutesNumber = 0;
+let hoursNumber = 0;
+let stopPressed = 0;
+/* 
+The 'startPressed' button handles the execution of the incrementation mechanism, so it could run properly even when the user press the 'start' button multiple times
+*/
+let startPressed = 0;
+start.onclick = function() {
+  startPressed++;
+  startButton.style.color = 'black';
+  startButton.textContent = "Start";
+
+  if (startPressed === 1 || stopPressed === true) {
+    stopPressed = 0;
+
+    //incrementation  mechanism
+    let timer = setInterval(() => {
+      secondsNumner++;
+      secondsElt.textContent = secondsNumner
+      if (secondsNumner >= 60) {
+        minutesNumber++;
+        secondsNumner = 0;
+        minutesElt.textContent = minutesNumber
+      }
+      if (minutesNumber >= 60) {
+        hoursNumber++;
+        hoursElt.textContent = hoursNumber
+      }
+    }, 1000)
+
+    stopTimer.onclick = function() {
+      clearInterval(timer);
+      startButton.textContent = 'Resume';
+      startButton.style.color = 'red';
+      stopPressed = true
+    }
+
+    reset.onclick = function() {
+      clearInterval(timer);
+      startPressed = 0;
+
+      //Changing the values printed
+      secondsElt.textContent = '00';
+      minutesElt.textContent = '00';
+      hoursElt.textContent = '00';
+      start.textContent = 'Start';
+      startButton.style.color = 'black';
+
+      //Changing the initial values
+      secondsNumner = 0;
+      minutesNumber = 0;
+      hoursNumber = 0;
+    }
+  }
+}
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,66 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  max-width: 100%;
+
+  font-family: Arial, Helvetica, sans-serif;
+}
+header {
+  background: lawngreen;
+  color: #ffffff;
+  width: 100%;
+  padding: 18px 12px;
+}
+header h1 {
+  font-size: 34px;
+  font-weight: 600;
+}
+main {
+  width: 80%;
+  margin: 32px auto 12px;
+}
+main h2 {
+  font-size: 24px;
+  font-weight: 400;
+}
+.clock {
+  font-size: 20px;
+  font-weight: 500;
+  color: lawngreen;
+  text-shadow: 0 0 5px lawngreen;
+  border: solid red;
+  padding: 10px 10px;
+  border-radius: 5px;
+  /* -webkit-box-reflect: below 4px linear-gradient(transparent, transparent, #000); */
+}
+.stopwatch {
+  margin-top: 42px;
+}
+.container {
+  display: flex;
+  padding: 50px 20px;
+  color: #ffffff;
+  background-color: #1a1a1a;
+  border-radius: 18px;
+  justify-content: center;
+}
+
+.parameters {
+  color: greenyellow;
+  font-size: 40px;
+}
+
+.btn {
+  border-radius: 8px;
+  width: 64px;
+  height: 40px;
+}
+
+#hours,
+#minutes,
+#seconds {
+  color: #ffffff;
+}