Grow-with-Open-Source · iamwatchdogs · Oct 30, 2023 · Oct 29, 2023 · Oct 30, 2023
diff --git a/Timer-and-Stopwatch/README.md b/Timer-and-Stopwatch/README.md
@@ -0,0 +1,7 @@
+# Timer-and-StopWatch
+
+<div align = "center">
+
+  ![image](https://github.com/Sisir2311/Timer-and-StopWatch/assets/74948767/e0fa449c-4552-4e46-b196-337a8a237304)
+
+</div>
diff --git a/Timer-and-Stopwatch/imaagg.jpg b/Timer-and-Stopwatch/imaagg.jpg
diff --git a/Timer-and-Stopwatch/index.html b/Timer-and-Stopwatch/index.html
@@ -0,0 +1,48 @@
+<!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>Timer & Stopwatch</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class = "hd">
+        <div class="mid">
+             TIMER AND STOPWATCH
+         </div>
+
+         <div class="switch">
+            <button class="totoggle" onclick="switcher()">SWITCH</button>
+            <p class = "ddoo" style="font-size: 20px; color: rgb(29, 51, 51); font-weight: bolder;">Click Switch to switch between Stopwatch and Timer</p>
+         </div>
+    </header>
+    <br>
+    <div class="full">
+        <div class="container" id="stopwatch">
+            <div class="timer">
+                <span id = "displayTime">00 : 00 : 00</span>
+            </div>
+            <div class="buttons">
+                <button id="start" onclick="watchStart()">Start</button>
+                <button id="pause" onclick = "watchStop()">Pause</button>
+                <button id="reset" onclick="watchReset()">Reset</button>
+            </div>
+        </div>
+        <div class="container" id="countdown">
+            <div class="timer">
+                <span id = "displayTime1">00 : 00 : 00</span>
+            </div>
+            <div class="buttons">
+                <button id="setTimer" onclick="getTime()">Set Timer</button>
+                <button id="start1" onclick="watchStart1()">Start</button>
+                <button id="pause1" onclick = "watchStop1()">Pause</button>
+                <button id="reset1" onclick="watchReset1()">Reset</button>
+            </div>
+        </div>
+    </div>
+    <footer><p>Made by <a href="https://github.com/Sisir2311" >Sisir</a></p> </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Timer-and-Stopwatch/script.js b/Timer-and-Stopwatch/script.js
@@ -0,0 +1,123 @@
+// dom objects
+let tog = document.querySelector("switch");
+let stopp = document.getElementById("stopwatch");
+let timm = document.getElementById("countdown");
+let isVisible = 'stopwatch';
+let dp1 = document.getElementById("displayTime1");
+let timer1 = null;
+timm.style.display = 'none';
+
+function switcher(){
+    if(isVisible === 'stopwatch'){
+        stopp.style.display = 'none';
+        timm.style.display = 'block';
+        isVisible = 'countdown';
+    }else{
+        timm.style.display = 'none';
+        stopp.style.display = 'block';
+        isVisible = 'stopwatch';
+    }
+}
+let time  = 0;
+function getTime(){
+    time = prompt("Enter time in minutes:");
+    time = time * 60;
+    let[s,m,h] = [0,0,0];
+    setIt();
+}
+function setIt(){
+        let temph = time / 3600;
+        h = Math.floor(temph);
+        let tempm = (temph - h) * 60;
+        m = Math.floor(tempm);
+        let temps = (tempm - m) * 60;
+        s = Math.floor(temps);
+        let h1 = h < 10 ? "0" + h : h;
+    let m1 = m < 10 ? "0" + m : m;
+    let s1 = s < 10 ? "0" + s : s;
+    dp1.innerHTML = `${h1}  :  ${m1}  :  ${s1}`;
+}
+function countdownn(){
+   if(s == 0 && m == 0 && h == 0){
+    alert("Your timer is up!!!!!!");
+
+    clearInterval(timer1);
+    dp1.innerHTML = "00 : 00 : 00";
+    return;
+   } 
+
+    if(s == 0){
+        if(m == 0){
+            h--;
+            m = 60;
+        }else{
+            m--;
+            s = 60;
+        }
+
+    }
+    s--;
+
+    h1 = h < 10 ? "0" + h : h;
+    m1 = m < 10 ? "0" + m : m;
+    s1 = s < 10 ? "0" + s : s;
+    dp1.innerHTML = `${h1}  :  ${m1}  :  ${s1}`;
+
+
+}
+function watchStart1(){
+    if(s == 0){
+        if(m == 0){
+            if(h == 0){
+                getTime();
+            }
+        }
+    }
+    if(timer1 !== null){
+        clearInterval(timer1);
+    }
+   timer1 =  setInterval(countdownn,1000);
+}
+function watchStop1(){
+    clearInterval(timer1);
+}
+function watchReset1(){
+    clearInterval(timer1);
+    [s,m,h] = [0,0,0]
+    dp1.innerHTML = "00 : 00 : 00";
+}
+let [seconds,minutes,hours] = [0,0,0]
+let dp = document.getElementById("displayTime");
+let timer = null;
+function stopwatch(){
+    seconds++;
+    if(seconds == 60){
+        seconds = 0;
+        minutes++;
+        if(minutes == 60){
+            minutes = 0;
+            hours++;
+        }
+    }
+
+    let h = hours < 10 ? "0" + hours : hours;
+    let m = minutes < 10 ? "0" + minutes : minutes;
+    let s = seconds < 10 ? "0" + seconds : seconds;
+
+    dp.innerHTML = `${h}  :  ${m}  :  ${s}`;
+    // dp.innerHTML = h + "  :  " + m + "  :  " + s;
+}
+function watchStart(){
+    if(timer !== null){
+        clearInterval(timer);
+    }
+   timer =  setInterval(stopwatch,1000);
+}
+function watchStop(){
+    clearInterval(timer);
+}
+function watchReset(){
+    clearInterval(timer);
+    [seconds,minutes,hours] = [0,0,0]
+    dp.innerHTML = "00 : 00 : 00";
+}
diff --git a/Timer-and-Stopwatch/style.css b/Timer-and-Stopwatch/style.css
@@ -0,0 +1,113 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+body{
+    overflow: hidden;
+}
+.hd,
+.full,
+.container,
+.buttons
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+.buttons{
+    justify-content: space-evenly;
+    padding-top: 30px;
+    width: 100%;
+}
+.timer{
+    font-size: 50px;
+    text-align: center;
+}
+.full{
+    width: 100vw;
+    height: 60vh;
+}
+.hd{
+    font-size: 2.5em;
+    padding-top: 50px;
+    display: flex;
+    flex-direction: column;
+}
+.mid{
+
+    padding-left: 21px;
+    padding-right: 21px;
+    background-color: #4d667b;
+    border-radius: 20px;
+    color: rgb(243, 241, 239);
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+.container{
+
+    display: inline-flex;
+    flex-direction: column;
+    width: 49%;
+    height: 49%;
+    background-color: rgba(0, 0, 0, 0.716);
+    border-radius: 40px;
+    color: white;
+}
+.container::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: url(imaagg.jpg) no-repeat center center/cover;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+    opacity: 0.6;
+}
+
+#start,#pause,#reset,#setTimer,#start1,#pause1,#reset1{
+    background-color: #477183; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 10px;
+}
+.switch{
+    padding-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.totoggle{
+    background-color: #77888f; /* Green */
+    border: none;
+    color: black;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 10px;
+    font-weight: bolder;
+}
+footer{
+    padding: 0px 500px;
+}
+footer p{
+    color: white;
+    text-align: center;
+    font-size: 2em;
+    display: inline-block;
+    width: 100%;
+    background-color: #4d667b;
+    border-radius: 10px;
+}