This JavaScript code snippet helps you to create an alarm clock. It defines an object called domName which contains references to various DOM elements using document.getElementById() method. It also defines a boolean variable called can. The getzone() function is defined which is called every second using setInterval(). This function updates the displayed time and checks if the set alarm time matches the current time, and if it does, it displays an alarm. Two for loops are used to populate the hour and minute select dropdowns with options. Lastly, there is an onEnter() function which is called when the “Set” or “Cancel” button is clicked.
Finally, this function toggles the value ofcan and updates the text displayed on the button and the alarm text accordingly.
How to Create JavaScript Alarm Clock
Create the HTML structure for the alarm clock as follows:
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="conainer">
<div class="alarm-screen" id="al1">
<div class="main-screen" id="al2">
<p class="hours hell" id="1">5</p>
<p class="minutes hell" id="2">01</p>
<p class="seconds hell" id="3">00</p>
</div>
<p id="al-text">the alarm was not set</p>
<div class="alarm-set">
<select name="" id="sel-hours"></select>
<select name="" id="sel-minutes"></select>
<button id="setal" onclick="onEnter()">set</button>
</div>
<!-- <p class="am-pm">am</p> -->
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./index.js"></script>
</body>
</html>
Now, style the alarm clock using the following CSS styles:
@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');
body{
transition: all ease-in-out 1s;
font-family: 'Nova Square', cursive;
color: white;
background-color: black
}
.cd__main{
display: block !important;
}
body{background-color: grey !important;}
.alarm-screen{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.main-screen{
display: flex;
font-size: 80px;
}
.main-screen p{
margin: 5px;
padding: 30px 40px;
border: 1px solid #fff;
width: 100px;
}
.alarm-screen-1{
color : yellow!important;
padding: 20px;
animation : mymove 1s infinite;
}
@keyframes mymove {
0% { border: 1px solid red}
25% { border: 1px solid pink}
75% { border: 1px solid black}
100% { border: 1px solid yellow}
}
Finally, add the following JavaScript function for its functionality:
"use strict";
let domName = {
hours : document.getElementById('1'),
minutes : document.getElementById('2'),
seconds : document.getElementById('3'),
selHours : document.getElementById('sel-hours'),
selMinutes : document.getElementById('sel-minutes'),
alText : document.getElementById("al-text"),
setAl : document.getElementById("setal")
}
let can = false;
function getzone(){
let currentD = new Date();
let hours = currentD.getHours();
let minutes = currentD.getMinutes();
let seconds = currentD.getSeconds();
let h = domName.selHours.value;
let m = domName.selMinutes.value;
// dom Deals
domName.hours.innerHTML = hours;
domName.minutes.innerHTML = minutes;
domName.seconds.innerHTML = seconds;
// alarm
if (can){
if(h == hours && m == minutes){
document.getElementById("al1").classList.add("alarm-screen-1");
}else{
document.getElementById("al1").classList.remove("alarm-screen-1");
}
}else{
}
}
setInterval(getzone , 1000);
for(let i = 1; i <= 24 ; i++){
let x = "<option value ='" + i +"'>" + i + "</option>";
domName.selHours.innerHTML += x;
}
for(let i = 1; i <= 59 ; i++){
let x = "<option value ='" + i +"'>" + i + "</option>";
domName.selMinutes.innerHTML += x;
}
function onEnter(){
if(can === false){
can = true;
domName.alText.innerHTML = "Alarm was set";
domName.setAl.innerHTML = "Cancel";
}else{
can = false;
domName.alText.innerHTML = "Alarm was not set";
domName.setAl.innerHTML = "Set";
}
}
That’s all! hopefully, you have successfully integrated the JavaScript code for the alarm clock. If you have any questions or suggestions, feel free to comment below.
