Merge pull request #389 from srinjoy-26/st

Vanilla stopwatch
Dezenix · May 31, 2022 · 8e56a3b · 8e56a3b
2 parents dcb295b + 35f1b42
commit 8e56a3b
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 0 deletions.
diff --git a/Vanilla stopwatch/README.md b/Vanilla stopwatch/README.md
@@ -0,0 +1,8 @@
+
+# vanilla stopwatch using javascript
+## tech stack
+- HTML
+- CSS
+- JS
+## look
+![Screenshot 2022-05-30 192855](https://user-images.githubusercontent.com/91176055/171007729-a6910b61-42d6-48de-9ab3-7de9ae0b9cca.png)
diff --git a/Vanilla stopwatch/index.html b/Vanilla stopwatch/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>stopwatch</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="stop">
+        <span id="Hour">00</span>:
+        <span id="Min">00</span>:
+        <span id="Sec">00</span>. 
+        <span id="Ms">00</span>
+    </div>
+    <div class="button">
+        <button id="start">start</button>
+        <button id="stop">stop</button>
+        <button id="Reset">Reset</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Vanilla stopwatch/script.js b/Vanilla stopwatch/script.js
@@ -0,0 +1,83 @@
+let Ms = 0;
+let Min = 0;
+let Hour = 0;
+let Sec = 0;
+
+let MsString = document.getElementById('Ms');
+let SecString = document.getElementById('Sec');
+let HourString = document.getElementById('Hour');
+let MinString = document.getElementById('Min');
+
+let startBtn = document.getElementById('start');
+let stopBtn = document.getElementById('stop');
+let ResetBtn = document.getElementById('Reset');
+
+let interval;
+
+function stopw(){
+    Ms++;
+    if(Ms == 100){
+        Ms = 0;
+        Sec++;
+        MsString.innerHTML = Ms;
+    }
+    if(Sec == 60){
+        Sec = 0;
+        Min++;
+        SecString.innerHTML = Sec;
+    }
+    if(Min == 60){
+        Min = 0;
+        Hour++;
+        MinString.innerHTML = Min;
+    }
+    if(Ms < 10){
+        MsString.innerHTML = '0' + Ms;
+    }
+    else{
+        MsString.innerHTML = Ms;
+    }
+    if(Sec < 10){
+        SecString.innerHTML = '0' + Sec;
+    }
+    else{
+        SecString.innerHTML = Sec;
+    }
+    if(Min < 10){
+        MinString.innerHTML = '0' + Min;
+    }
+    else{
+        MinString.innerHTML = Min;
+    }
+    if(Hour < 10){
+        HourString.innerHTML = '0' + Hour;
+    }
+    else{
+        HourString.innerHTML = Hour;
+    }
+}
+function startTimer(){
+    clearInterval(interval);
+    interval = setInterval(stopw, 10);
+}
+function stopTimer(){
+    clearInterval(interval);
+
+}
+
+function resetTimer(){
+    clearInterval(interval);
+    Ms = 0;
+    Sec = 0;
+    Min = 0;
+    Hour = 0;
+
+    MsString.innerHTML = '00';
+    SecString.innerHTML = '00';
+    MinString.innerHTML = '00';
+    HourString.innerHTML = '00';
+}
+
+startBtn.addEventListener('click', startTimer);
+stopBtn.addEventListener('click', stopTimer);
+ResetBtn.addEventListener('click', resetTimer);
diff --git a/Vanilla stopwatch/style.css b/Vanilla stopwatch/style.css
@@ -0,0 +1,37 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    height: 100vh;
+    background-color: #0a1e29;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-family: sans-serif;
+}
+.stop{
+    color: #fff;
+    font-size: 5em;
+}
+.button button{
+    background-color: #fff;
+    border: none;
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 1.25em;
+    font-weight: 600 ;
+    margin: 0 10px;
+    cursor: pointer;
+}
+#start{
+    background-color: aquamarine;
+}
+#stop{
+    background-color: yellow;
+}
+#Reset{
+    background-color: red;
+}