diff --git a/Timer-and-Stopwatch/README.md b/Timer-and-Stopwatch/README.md new file mode 100644 index 0000000..8342b49 --- /dev/null +++ b/Timer-and-Stopwatch/README.md @@ -0,0 +1,7 @@ +# Timer-and-StopWatch + +
+ + ![image](https://github.com/Sisir2311/Timer-and-StopWatch/assets/74948767/e0fa449c-4552-4e46-b196-337a8a237304) + +
diff --git a/Timer-and-Stopwatch/imaagg.jpg b/Timer-and-Stopwatch/imaagg.jpg new file mode 100644 index 0000000..3c1053b Binary files /dev/null and b/Timer-and-Stopwatch/imaagg.jpg differ diff --git a/Timer-and-Stopwatch/index.html b/Timer-and-Stopwatch/index.html new file mode 100644 index 0000000..4f71fdb --- /dev/null +++ b/Timer-and-Stopwatch/index.html @@ -0,0 +1,48 @@ + + + + + + + Timer & Stopwatch + + + +
+
+ TIMER AND STOPWATCH +
+ +
+ +

Click Switch to switch between Stopwatch and Timer

+
+
+
+
+
+
+ 00 : 00 : 00 +
+
+ + + +
+
+
+
+ 00 : 00 : 00 +
+
+ + + + +
+
+
+ + + + \ No newline at end of file diff --git a/Timer-and-Stopwatch/script.js b/Timer-and-Stopwatch/script.js new file mode 100644 index 0000000..8a03186 --- /dev/null +++ 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 new file mode 100644 index 0000000..706456c --- /dev/null +++ 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; +}