Timer Program is my second program in JavaScript. It took me to 2 weeks to finish. I would like you to comment any bug or issue in my program
How it works
The code is simple. First I create 3 variable which 3 of them saved the hours, minutes and seconds.
let hours = 0 let minutes = 0 let seconds = 0
After that I programming the set button to when I click it the value of the textbox separate in variables and start a loop
function set(){ const textbox1 = document.getElementById("textbox1").value; hours = Math.floor(textbox1/60) minutes = textbox1%60 if(hours<10){ hours = `0${hours}`; } setTimeout(display, 1000) }
The loop is a way to change the timer per second
setTimeout(display, 1000)
In that loop I set many ifs to work
if(seconds==0 && minutes==0 && hours==0){ var audio = new Audio('sound/endSoundTimer.mp3'); return audio.play(); } if(seconds==0 && minutes==0 && hours>0){ minutes=59 seconds=59 hours-- if(hours<10){ hours = `0${hours}`; } } if(seconds==0 && minutes>0){ seconds=59 minutes-- if(minutes<10){ minutes = `0${minutes}`; } } else if(seconds!=0 || minutes!=0 || hours!=0){ seconds-- if(seconds<10){ seconds = `0${seconds}`; } }
Zip File
Or
<!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"> <link rel="stylesheet" href="style/style.css"> <title>Timer</title> <style> body{ text-align: center; background-color: rgb(77, 216, 123); } #textbox1{ height: 50px; font-size: 25px; } #MyClockDisplay { transform: translateY(250%); color: #000; font-size: 60px; letter-spacing: 2px; display: inline-block; border: solid; border-radius: 10px; } @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900'); :root { --text-color: hsla(210, 50%, 85%, 1); --shadow-color: hsla(210, 40%, 52%, .4); --btn-color: hsl(210, 80%, 42%); --bg-color: #141218; } * { box-sizing: border-box; } button { position:relative; padding: 10px 20px; border: none; background: none; cursor: pointer; font-family: "Source Code Pro"; font-weight: 900; text-transform: uppercase; font-size: 30px; color: var(--text-color); background-color: var(--btn-color); box-shadow: var(--shadow-color) 2px 2px 22px; border-radius: 4px; z-index: 0; overflow: hidden; } button:focus { outline-color: transparent; box-shadow: var(--btn-color) 2px 2px 22px; } .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40px; pointer-events:none; } button::after{ font-weight: 200; top: -30px; left: -20px; } .right, .left { position: absolute; width: 100%; height: 100%; top: 0; } .right { left: 66%; } .left { right: 66%; } .right::after { top: -30px; left: calc(-66% - 20px); background-color: var(--bg-color); color:transparent; transition: transform .4s ease-out; transform: translate(0, -90%) rotate(0deg) } button:hover .right::after { transform: translate(0, -47%) rotate(0deg) } button .right:hover::after { transform: translate(0, -50%) rotate(-7deg) } button .left:hover ~ .right::after { transform: translate(0, -50%) rotate(7deg) } /* bubbles */ button::before { content: ''; pointer-events: none; opacity: .6; background: radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px), radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px), radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px); width: 100%; height: 300%; top: 0; left: 0; position: absolute; animation: bubbles 5s linear infinite both; } @keyframes bubbles { from { transform: translate(); } to { transform: translate(0, -66.666%); } } </style> </head> <body> <input type="number" id="textbox1" min="0" placeholder="Minutes"> <button onclick="set()" style="--content: 'Set';">Set <div class="left"></div> <div class="right"></div> </button> <br> <div id="MyClockDisplay" onload="showTime()"></div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <button onclick="stop()" style="--content: 'Stop';">Stop <div class="left"></div> <div class="right"></div> </button> <script> let hours = 0 let minutes = 0 let seconds = 0 function display(){ if(seconds==0 && minutes==0 && hours==0){ var audio = new Audio('https://spiridakis.eu/wp-content/uploads/2021/11/endSoundTimer.mp3'); return audio.play(); } if(seconds==0 && minutes==0 && hours>0){ minutes=59 seconds=59 hours-- if(hours<10){ hours = `0${hours}`; } } if(seconds==0 && minutes>0){ seconds=59 minutes-- if(minutes<10){ minutes = `0${minutes}`; } } else if(seconds!=0 || minutes!=0 || hours!=0){ seconds-- if(seconds<10){ seconds = `0${seconds}`; } } const time = `${hours} : ${minutes} : ${seconds} `; document.getElementById("MyClockDisplay").innerText = time; document.getElementById("MyClockDisplay").textContent = time; setTimeout(display, 1000) } function set(){ const textbox1 = document.getElementById("textbox1").value; hours = Math.floor(textbox1/60) minutes = textbox1%60 if(hours<10){ hours = `0${hours}`; } setTimeout(display, 1000) } function stop(){ location.reload(); } </script> </body> </html>