From 3577f659eab37d026ee6052ca902fb33477928b7 Mon Sep 17 00:00:00 2001 From: Priyanshu Haldar Date: Fri, 21 Oct 2022 12:06:38 +0530 Subject: [PATCH] Added a simple stopwatch --- Fronted Projects/stopwatch/stopwatch.css | 49 +++++++++++++++++ Fronted Projects/stopwatch/stopwatch.html | 27 ++++++++++ Fronted Projects/stopwatch/stopwatch.js | 64 +++++++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 Fronted Projects/stopwatch/stopwatch.css create mode 100644 Fronted Projects/stopwatch/stopwatch.html create mode 100644 Fronted Projects/stopwatch/stopwatch.js diff --git a/Fronted Projects/stopwatch/stopwatch.css b/Fronted Projects/stopwatch/stopwatch.css new file mode 100644 index 00000000..bef5f40c --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Fronted Projects/stopwatch/stopwatch.html b/Fronted Projects/stopwatch/stopwatch.html new file mode 100644 index 00000000..fadd1f8b --- /dev/null +++ b/Fronted Projects/stopwatch/stopwatch.html @@ -0,0 +1,27 @@ + + + + js-stopwatch + + + +
+
+ STOPWATCH +

00:00:00

+ +
+ +
+
+ +
+
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/Fronted Projects/stopwatch/stopwatch.js b/Fronted Projects/stopwatch/stopwatch.js new file mode 100644 index 00000000..3966ee35 --- /dev/null +++ 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; +} \ No newline at end of file