Merge pull request #23 from priyanshuhaldar007/PriyanshuHaldar

kaal-coder · web-flow · commit 8754ad05e629 · 2022-10-22T02:01:37.000+05:30
Added a simple stopwatch
diff --git a/Fronted Projects/stopwatch/stopwatch.css b/Fronted Projects/stopwatch/stopwatch.css
@@ -0,0 +1,49 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color:rgb(240, 133, 34);
+    color: white;
+    text-align:center;
+}
+.container{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#main p{
+    padding-bottom: 20px;
+    font-size: 25px;
+}
+#main b{
+    font-family:sans-serif;
+    font-size: 80px;
+    text-size-adjust: 30px;
+    padding-bottom: 10px;
+}
+#main span{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 50px;
+}
+#main span div button{
+    height: 100%;
+    width: 120px;
+    font-size: 20px;
+    color: white;
+    background-color: transparent;
+    border:2px solid white;
+    border-radius: 50px;
+}
+#main span div button:focus{
+    animation-delay: 2s;
+    background-color: white;
+    color: rgb(240, 133, 34) ;
+    outline: none;
+}
diff --git a/Fronted Projects/stopwatch/stopwatch.html b/Fronted Projects/stopwatch/stopwatch.html
@@ -0,0 +1,27 @@
+<!Doctype html>
+<html>
+    <head>
+        <title>js-stopwatch</title>
+        <link rel="stylesheet" type="text/css" href="stopwatch.css">
+    </head>
+    <body>
+        <section class="container">
+            <div id="main">
+                <b>STOPWATCH</b>
+                <p id="display">00:00:00</p>
+                <span>
+                    <div>
+                        <button id="jstart" onclick="clockstart()">START</button>
+                    </div>
+                    <div>
+                        <button id="jstop" onclick="clockstop()">STOP</button>
+                    </div>
+                    <div>
+                        <button id="jreset" onclick="clockreset()">RESET</button>
+                    </div>
+                </span>
+            </div>    
+        </section>
+        <script src="stopwatch.js"></script>
+    </body>
+</html>
diff --git a/Fronted Projects/stopwatch/stopwatch.js b/Fronted Projects/stopwatch/stopwatch.js
@@ -0,0 +1,64 @@
+//define var to hold values
+let sec=00;
+let min=00;
+let hr=00;
+
+let displaysec=0;
+let displaymin=0;
+let displayhr=0;
+
+var interval=null;
+var status="stopped";
+
+
+function stopwatch() {
+    sec++;
+    if(sec/60===1){
+        min++;
+        sec=0;
+
+        if(min/60===1){
+            hr++;
+            min=0; 
+    
+            
+        }
+    }
+     
+    if(sec<10){
+        displaysec="0"+sec.toString();
+    }else{
+        displaysec=sec;
+    }
+    if(min<10){
+        displaymin="0"+min.toString();
+    }else{
+        displaymin=min;
+    }
+    if(hr<10){
+        displayhr="0"+hr.toString();
+    }else{
+        displayhr=hr;
+    }
+
+    //display time values
+    document.getElementById("display").innerHTML=displayhr+":"+displaymin+":"+displaysec;
+    
+}
+
+function clockstart(){
+    if(status=="stopped"){
+        interval=window.setInterval( stopwatch ,1000);
+        status="started";
+    }
+}
+function clockstop(){
+    status="stopped";
+    window.clearInterval(interval);
+}
+function clockreset(){
+    status="stopped";
+    window.clearInterval(interval);
+    document.getElementById("display").innerHTML="00:00:00";
+    sec=0;min=0;hr=0;
+}
