diff --git a/Clock and timer P/index.html b/Clock and timer P/clock.html similarity index 51% rename from Clock and timer P/index.html rename to Clock and timer P/clock.html index 7a8cff2..1719d1f 100644 --- a/Clock and timer P/index.html +++ b/Clock and timer P/clock.html @@ -11,17 +11,7 @@

00:00:00

00:00:00
-
-
-
00:00:00
-
- - - -
- - - + \ No newline at end of file diff --git a/Clock and timer P/script.js b/Clock and timer P/clockScript.js similarity index 100% rename from Clock and timer P/script.js rename to Clock and timer P/clockScript.js diff --git a/Clock and timer P/style.css b/Clock and timer P/style.css index 7791a66..2fad103 100644 --- 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; +} \ No newline at end of file diff --git a/Clock and timer P/timer.html b/Clock and timer P/timer.html new file mode 100644 index 0000000..a82e988 --- /dev/null +++ b/Clock and timer P/timer.html @@ -0,0 +1,23 @@ + + + + + + + + Timer + + +
+

00:00:00

+
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/Clock and timer P/timerScript.js b/Clock and timer P/timerScript.js new file mode 100644 index 0000000..b9ac242 --- /dev/null +++ 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}` +} \ No newline at end of file