loatile · loatile · Dec 22, 2025
diff --git a/Clock and timer P/index.html → Clock and timer P/clock.html b/Clock and timer P/index.html → Clock and timer P/clock.html
@@ -11,17 +11,7 @@
     <div id = "clock">
         <h3 id = "timeDis">00:00:00</h3>
         <h5 id = "countdownDis">00:00:00</h5>
-
     </div>
-    <div id = "timer">
-        <h5 id = "timerDis">00:00:00</h5>
-        <br>
-        <button id = "reset" onclick="resetTimer()">Reset</button>
-        <button id = "pause" onclick="pauseTimer()">Pause</button>
-        <button id = "start" onclick="startTiemer()">Start</button>
-    </div>
-
-
-<script src = "script.js"></script>
+<script src = "clockScript.js"></script>
 </body>
 </html>
diff --git a/Clock and timer P/script.js → Clock and timer P/clockScript.js b/Clock and timer P/script.js → Clock and timer P/clockScript.js
diff --git a/Clock and timer P/style.css b/Clock and timer P/style.css
@@ -10,6 +10,22 @@ html{
     justify-content: center;
     flex-direction: column;
     align-items: center;
-    height: 10vh;
+    height: 100vh;
 }
 
+#timer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#timer button{
+    border-radius: 5px;
+    padding: 10px;
+    border-color: rgba(255, 255, 255, 0);
+    margin: 10px;
+    background-color: rgba(0, 0, 0, 0.49);
+    color: white;
+}
diff --git a/Clock and timer P/timer.html b/Clock and timer P/timer.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel = "stylesheet" href = "style.css">
+
+    <title>Timer</title>
+</head>
+<body>
+    <div id = "timer">
+        <h3 id = "timerDis">00:00:00</h5>
+        <br>
+        <div id = "buttons">
+            <button id = "reset" onclick="resetTimer()">Reset</button>
+            <button id = "pause" onclick="pauseTimer()">Pause</button>
+            <button id = "start" onclick="startTimer()">Start</button>
+        </div>
+    </div>
+
+<script src="timerScript.js"></script>
+</body>
+</html>
diff --git a/Clock and timer P/timerScript.js b/Clock and timer P/timerScript.js
@@ -0,0 +1,60 @@
+// this is where we'll work on the timer and the like. been a month between the two though, but you got this. anyway, should be simple
+
+// * textContent will be replaed with the function
+// * need do add functionality to the buttons
+// * think ill be following a tutorial for this one just to get my toes wet
+
+
+
+const display = document.getElementById("timerDis"); // setting the display
+let timer = null; // initialising the timer 
+let startTime = 0; // 
+let elapsedTime = 0; // this is the time passed, this'll be displayed each time the timer stops
+let isRunning = false; // used to determine wether the watch is runnig or not in order to pause or start
+
+function startTimer(){
+
+    if(!isRunning){
+        startTime = Date.now()-elapsedTime;
+        timer = setInterval(updateTimer, 10); // updating the display/timer every 10ms
+        isRunning = true;
+    }
+}
+
+function pauseTimer(){
+
+    if(isRunning){
+        clearInterval(timer); // clearing the timer stops it from updating the display
+        elapsedTime = Date.now() - startTime;
+        isRunning = false;
+    }
+
+}
+
+function resetTimer(){
+
+    clearInterval(timer);
+    startTime = 0;
+    elapsedTime = 0;
+    isRunning = false;
+
+    display.textContent = "00:00:00:00"
+}
+
+function updateTimer(){ // this will update the display
+
+    const currentTime = Date.now(); // setting a current time to etablish out now
+    elapsedTime = currentTime - startTime; // setting up our elapsed time by finging the difference between now and when we started the timer
+
+    let hour = Math.floor(elapsedTime/(1000*60*60));
+    let minute = Math.floor(elapsedTime/(1000*60)%60);
+    let seconds = Math.floor(elapsedTime/1000%60);
+    let miliseconds = Math.floor(elapsedTime%1000/10);
+
+    hour = hour.toString().padStart(2, "0");
+    minute = minute.toString().padStart(2, "0");
+    seconds = seconds.toString().padStart(2, "0");
+    miliseconds = miliseconds.toString().padStart(2, "0");
+
+    display.textContent = `${hour}:${minute}:${seconds}:${miliseconds}`
+}