I have applied some styling to a div but only the heading part is included, the rest of the content is always excluded. Please help me. You can run the snippet and check. I want the time to be included in the CURRENT TIME box as they are in the same div.
var hou = document.getElementById("hours"); //getting the ids of hours, mins and secs
var min = document.getElementById("minutes");
var sec = document.getElementById("second");
var Hours; //defining global variables
var Minutes;
var Seconds;
document.getElementById("display1").innerHTML = new Date().getHours(); //displaying output
document.getElementById("display2").innerHTML = new Date().getMinutes(); //displaying output
document.getElementById("display3").innerHTML = new Date().getSeconds(); //displaying output
//Setting the alarm
function setAlarm() {
let h = document.getElementById("h"); //getting input values of hour and ...
let m = document.getElementById("m");
let s = document.getElementById("s");
let h1 = parseFloat(h.value); //converting the input values from string to float
let m1 = parseFloat(m.value);
let s1 = parseFloat(s.value);
var timer = document.getElementById("time").valueAsNumber; //getting input of time element and
// console.log(timer/1000);
// console.log(new Date().getTime())
const interval = setInterval(function() {
var curTime = (new Date().getHours()) * 3600 + (new Date().getMinutes()) * 60 + new Date().getSeconds();
// console.log(curTime)
var duration = (timer / 1000 - curTime);
console.log(duration);
var calc = (h1 * 3600) + (m1 * 60) + (s1);
console.log(curTime);
console.log(calc);
if (duration == 0 || (calc - curTime) == 0) {
document.querySelector("audio").play(); //plays audio
clearInterval(interval);
}
}, 1000);
}
//# sourceMappingURL=clock.js.map.heading {
background-color: rgb(184, 202, 230);
color: rgb(250, 250, 253);
width: 100%;
border-radius: 1rem;
font-size: 2.5rem;
}
#container {
position: relative;
margin: auto;
border: 2px solid;
width: 40vw;
background: url("Images/Clock.png") no-repeat;
background-size: 100%;
height: 42vw;
float: left;
clear: right;
max-width: 40vw;
}
#hours,
#minutes,
#second {
position: absolute;
background: black;
border-radius: 1em;
transform-origin: bottom;
}
#hours {
width: 2.5%;
height: 19%;
top: 32.5%;
left: 48.7%;
opacity: 0.8;
}
#minutes {
height: 46%;
width: 1%;
top: 5%;
left: 49.4%;
}
#second {
height: 38%;
width: 0.3%;
top: 13%;
left: 49.8%;
background: red;
}
/* .alarm{
float: right;
} */
.ctime {
border: 2px solid red;
margin: 0 auto;
width: fit-content;
padding: 10px;
background: #000;
text-align: center;
}
.ctimeh {
color: white;
}
.square {
font-size: x-large;
width: fit-content;
margin: auto;
float: left;
}
#display1,
#display2,
#display3 {
border: 2px solid;
padding: 0.5rem;
background-color: black;
color: white;
font-weight: bolder;
border-radius: 0.5rem;
align-items: flex-start;
flex-direction: row;
float: left;
margin-bottom: 0.1rem;
}
.text {
font-weight: bolder;
text-align: center;
font-size: large;
color: white;
}
.alarm {
clear: left;
}<!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>Clock</title>
<link rel="stylesheet" href="clock.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="clock.js" defer></script>
</head>
<body>
<h1 class="heading" style="text-align: center;">Clock</h1>
<div class="ctime">
<div class="text">
<h1 class="ctimeh">CURRENT TIME</h1>
</div>
<div class="square">
<p class="digits" id="display1"></p>
<p class="text">HR</p>
</div>
<div class="square">
<p class="digits" id="display2"></p>
<p class="text">MIN</p>
</div>
<div class="square">
<p class="digits" id="display3"></p>
<p class="text">SEC</p>
</div>
</div>
<br>
<div class="alarm" title="Alarm">
<audio>
<source src="Audio/Alarm1.wav" id="audio" type="audio/wav">
</audio>
<input type="number" name="Minutes" id="h" title="Hours" placeholder="Hours">
<input type="number" name="Minutes" id="m" title="Minutes" placeholder="Minutes">
<input type="number" name="Seconds" id="s" title="Seconds" placeholder="Seconds">
<button onclick="setAlarm()" title="Button" id="btn">Click</button>
<input type="time" id="time">
</div>
</body>
</html>Please help me out. I have been working on it for a long time and this issue has been meddling with my mind
