StopwatchMiniProject

2024-10-10 19:02:07 +02:00
parent dacbb89950
commit a94be56583
4 changed files with 120 additions and 0 deletions
--- a/MiniProjects/StopWatch/watch.html
+++ b/MiniProjects/StopWatch/watch.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StopWatch</title>
+</head>
+<style>
+    .container {
+        margin: 20% auto;
+        width: 40%;
+        border-radius: 15px;
+        border: 2px solid black;
+        background-color: lightblue;
+        align-content: center;
+        min-width: fit-content;
+    }
+    .title{
+        text-align: center;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        margin: 20px;
+    }
+    #time {
+        letter-spacing: 1ch;
+        font-size: 5ch;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        text-align: center;
+        margin: 0;
+        background-color: rgb(184, 202, 221);
+        border-radius: 15px;
+        width: fit-content;
+        margin: auto;
+    }
+    .button-holder {
+        text-align: center;
+    }
+    .button{
+        padding: 10px;
+        margin: 10px;
+        width: 120px;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        border-radius: 15px;
+        cursor: pointer;
+        font-size: 2ch;
+        font-weight: bold;
+    }
+    .button:hover {
+        background-color: rgb(184, 202, 221);
+    }
+</style>
+<body>
+    <div class="container">
+        <h1 class="title">StopWatch</h1>
+        <h1 id="time">00:00:00</h1>
+        <div class="button-holder">
+            <input class="button" style="background-color: green;" type="button" value="Start" onclick="start()">
+            <input class="button" style="background-color:red;" type="button" value="Stop" onclick="stop()">
+            <input class="button" style="background-color: royalblue;" type="button" value="Reset" onclick="reset()">
+        </div>
+    </div>
+    <script src="watch.js"></script>
+</body>
+</html>
--- a/MiniProjects/StopWatch/watch.js
+++ b/MiniProjects/StopWatch/watch.js
@ -0,0 +1,41 @@
+//The stopwatch is incremented using a closure function!
+function stopwatch() {
+    var time = new Date(0, 0, 0, 0, 0, 0, 0);
+    var pause = false;
+
+    function increment() {
+        if (!pause) {
+            time.setSeconds(time.getSeconds() + 1);
+            const hours = time.getHours().toString().padStart(2, "0");
+            const minutes = time.getUTCMinutes().toString().padStart(2, "0");
+            const seconds = time.getUTCSeconds().toString().padStart(2, "0");
+            document.getElementById("time").innerHTML = `${hours}:${minutes}:${seconds}`;
+        }
+    }
+
+    function pauseTimer() {
+        pause = true;
+    }
+
+    return { increment, pauseTimer };
+}
+
+var timer = stopwatch();
+var intervalId;
+
+function start() {
+    if (!intervalId) {
+        intervalId = setInterval(timer.increment, 1000);
+    }
+}
+
+function stop() {
+    timer.pauseTimer();
+}
+
+function reset() {
+    clearInterval(intervalId);
+    intervalId = null;
+    timer = stopwatch();
+    document.getElementById("time").innerHTML = "00:00:00";
+}
--- a/Practice/AdvancedThings/index.html
+++ b/Practice/AdvancedThings/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tittle</title>
+</head>
+<body>
+    <h1>For every output check out the console!!!</h1>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/Practice/AdvancedThings/script.js
+++ b/Practice/AdvancedThings/script.js
@ -0,0 +1,4 @@
+console.log("Hello World");
+
+//I shall continue from this poin:
+//https://youtu.be/lfmg-EJ8gm4?feature=shared&t=27294