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>
