diff --git a/Sidben99/countDownTImer/index.html b/Sidben99/countDownTImer/index.html new file mode 100644 index 0000000..216bdc7 --- /dev/null +++ b/Sidben99/countDownTImer/index.html @@ -0,0 +1,20 @@ + + + + + + + + + Document + + +
+
00:00
+ play_arrow + restart_alt + timer +
+ + + \ No newline at end of file diff --git a/Sidben99/countDownTImer/main.js b/Sidben99/countDownTImer/main.js new file mode 100644 index 0000000..152d30c --- /dev/null +++ b/Sidben99/countDownTImer/main.js @@ -0,0 +1,97 @@ +let timerBtn = document.querySelector(".container").lastElementChild; +let publicMinute = 0; +let startAndPause = document.querySelector(".container span:first-of-type"); +let i =0; +let intervalID; + + + +let setTime = () => { + let minute = prompt("set a number of minutes"); + if(minute !== null){ + while(minute > 60) { + alert("enter a number smaller than 60") + minute = prompt("set a number of minutes"); + } + while(minute < 0) { + alert("enter a number greater than 0") + minute = prompt("set a number of minutes"); + } + while(isNaN(parseInt(minute))) { + alert("enter a number not a character") + minute = prompt("set a number of minutes"); + } + clearInterval(intervalID); + let timer = document.querySelector(".timer"); + minute = parseInt(minute); + timer.innerHTML = minute >= 10 ? minute+":00" : "0"+minute+":00"; + publicMinute = minute; + } + +} +timerBtn.addEventListener("click",setTime); + + +startAndPause.onclick = () => { + + let time = document.querySelector(".timer").innerHTML; + let currentMinute = parseInt(time.slice(0,time.indexOf(":"))); + let currentSecs = parseInt(time.slice(time.indexOf(":")+1,time.length)); + + if(i % 2 === 0){ + startAndPause.innerHTML = "pause"; + startAndPause.style.setProperty("color","#e74320"); + timerBtn.removeEventListener("click",setTime) + timerBtn.style.setProperty("color","#ccc") + var j = setInterval(counting,1000) ; + intervalID = j; + function counting () { + currentSecs--; + if(currentSecs === -1){ + if(currentMinute === 0){ + // ending functionality + + clearInterval(j); + startAndPause.innerHTML = "play_arrow"; + startAndPause.style.setProperty("color","#52c6ba"); + timerBtn.addEventListener("click",setTime); + timerBtn.style.setProperty("color","#ffbb30") + i++; + }else{ + // new minute Functionality + currentMinute--; + currentSecs = 60; + + } + }else{ + + startAndPause.previousElementSibling.innerHTML = `${currentMinute >= 10 ? currentMinute : "0"+currentMinute}:${currentSecs >= 10 ? currentSecs : "0"+currentSecs}`; + } + + } + + }else{ + // stoping functionality + + clearInterval(intervalID); + startAndPause.innerHTML = "play_arrow"; + startAndPause.style.setProperty("color","#52c6ba"); + timerBtn.addEventListener("click",setTime); + timerBtn.style.setProperty("color","#ffbb30") + } + i++; +} + + +// reset Time +let reset = document.querySelector(".container span:nth-of-type(2)"); +reset.onclick = () => { + clearInterval(intervalID); + let timer = document.querySelector(".timer"); + timer.innerHTML = `${publicMinute >= 10 ? publicMinute : "0"+publicMinute}:00`; + i=0; + startAndPause.innerHTML = "play_arrow"; + startAndPause.style.setProperty("color","#52c6ba"); + timerBtn.addEventListener("click",setTime); + timerBtn.style.setProperty("color","#ffbb30") +} diff --git a/Sidben99/countDownTImer/style.css b/Sidben99/countDownTImer/style.css new file mode 100644 index 0000000..27947ec --- /dev/null +++ b/Sidben99/countDownTImer/style.css @@ -0,0 +1,45 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:arial , "sans-serif"; +} +body{ + height:100vh; + padding:200px 20px; + display:grid; + place-items:center; + background-color:#eee; +} +.container { + border:1px solid rgba(0,0,0,.05); + width:300px; + background-color:white; + border-radius:10px; + padding:10px 30px; + height:100px; + display:grid; + grid-template-columns:1fr max-content max-content max-content; + align-items:center; + gap:10px; + box-shadow:0px 10px 10px rgba(0,0,0,.05); +} +.timer{ + justify-self:flex-start; + font-weight:700; + font-size:21px; + color:#333; +} +.container span{ + font-size:28px; + cursor:pointer; +} +.container span:first-of-type{ + color:#52c6ba; +} +.container span:nth-of-type(2){ + color:#1775aa; +} +.container span:last-of-type{ + color:#ffbb30; +} \ No newline at end of file