In this blog post, you’ll learn how to build an Digital Alarm Clock in HTML CSS & JavaScript. It's time to create a digital clock with an alarm system. In the previous blog, I explained how to create an analogue clock using HTML, CSS, and JavaScript.
The digital clock in this alarm clock, which can be seen in the preview image, displays the time as well as the hour, minutes, and am/pm alarm settings. Alarms can be set by users for any time, whether it is AM or PM.
Digital alarm clock in javascript
To create an digital alarm clock with JavaScript, HTML, CSS, and other building elements, carefully follow these steps:
To build this digital alarm clock. The three files you must first create are the HTML, CSS, and JavaScript files. Simply copy and paste the provided codes into your file after creating these files. Using the download button below, you can also get the source code files for this digital alarm clock. Download the Google Drive folder containing the clock icon and ringtone, then place it in the same project folder.
Firstly, copy and paste the codes listed below into your index.html file:
<!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>Digital Alarm Clock - Bijan's Blogs</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="initClock()">
<!--Alarm Clock-->
<div class="alarm">
<div class="datetime">
<div class="date">
<div id="alarmclock">ALARM CLOCK</div>
<span id="dayName">Day</span>,
<span id="month">Month</span>,
<span id="dayNum">00</span>,
<span id="year">Year</span>
</div>
<div class="time">
<span id="hour">00</span>:
<span id="minutes">00</span>:
<span id="seconds">00</span>:
<span id="period">AM</span>
</div>
<button id="stopAlarm" onclick="stopAlarm()">Stop Alarm</button>
</div>
<div class="setAlarm">
<div class="column">
<select>
<option value="setHour" selected hidden>Hour</option>
</select>
</div>
<div class="column">
<select>
<option value="setMinute" selected
hidden>Minute</option>
</select>
</div>
<div class="column">
<select>
<option value="setSeconds" selected
hidden>Seconds</option>
</select>
</div>
<div class="column">
<select>
<option value="AM/PM" selected hidden>AM/PM</option>
</select>
</div>
<button id="btn-setAlarm" type="submit">Set Alarm</button>
</div>
<h3 id="alarm-h3"></h3>
<div class="alarmList"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Next, incorporate the ensuing codes into your design.CSS file:
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #2e2c3a;
}
::-webkit-scrollbar{
display: none;
}
/*Alarm Clock style*/
.alarm{
border: 2px solid rgba(0,0,0,0.25);
border-radius: 8px;
background: #2f363e;
box-shadow: 10px 50px 70px rgba(0,0,0,0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);
margin-left: 40px;
padding: 15px;
}
.datetime{
color: #fff;
background: rgba(0,0,0,0.5);
box-shadow: 10px 50px 70px rgba(0,0,0,0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);;
border-radius: 5px;
font-family: "Segoe UI", sans-serif;
width: 400px;
padding: 15px 20px;
transition: 0.5s;
transition-property: all;
}
.datetime:hover{
background: rgba(45, 44, 44, 0.5);
box-shadow: 10px 50px 70px rgba(69, 68, 68, 0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);;
border-radius: 5px;
}
.date{
font-size: 20px;
font-weight: 600;
text-align: center;
letter-spacing: 3px;
}
.time{
font-size: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.time span:not(:last-child){
position: relative;
max-width: 0 6px;
font-weight: 600;
text-align: center;
}
.time span:last-child{
background: #41414358;
font-size: 60px;
font-weight: 600;
text-transform: uppercase;
margin-top: 10px;
padding: 0 5px;
border-radius: 3px;
}
hr{
border: 2px solid rgb(0, 0, 0);
margin: 20px auto;
background: #2f363e;
box-shadow: 10px 50px 70px rgba(0,0,0,0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);
}
.setAlarm{
display: flex;
justify-content: space-around;
border-radius: 10px;
overflow: hidden;
padding: 10px 0;
}
.column select{
background: #242426;
color: #fff;
text-align: center;
padding: 8px 4px;
border: 2px solid rgba(0,0,0,0.25);
border-radius: 18px;
box-shadow: 10px 50px 70px rgba(0,0,0,0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);
}
#btn-setAlarm, .btn-delete, #stopAlarm{
padding: 5px;
color: #fff;
background: #242426;
background: ;
border: 2px solid rgba(0,0,0,0.25);
border-radius: 18px;
box-shadow: 10px 50px 70px rgba(0,0,0,0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);
}
#stopAlarm{
visibility: hidden;
width: 100px;
margin: 0 34%;
}
.btn-delete{
margin-left: 50px;
}
#btn-setAlarm:hover, .btn-delete:hover, #stopAlarm:hover{
cursor: pointer;
background: rgba(255,255,255,0.2);
box-shadow: 0 0 30px rgba(255,255,255,0.2);
}
h3{
color: #fff;
font-family: "Segoe UI", sans-serif;
font-size: 20px;
font-weight: 900;
text-align: center;
margin-bottom: 3%;
}
.alarmList{
color: #fff;
margin: 14px auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.alarmLog{
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 6px auto;
}
Finally, insert the subsequent codes into your script.JS file:
// variables
const ring = new Audio('Alarm-ringtone.mp3');
ring.loop = true;
let alarmListArr = [];
const selectMenu = document.querySelectorAll("select");
const setAlarmBtn = document.querySelector("#btn-setAlarm");
let alarmCount = 0;
let alarmTime;
// Script for Time and Date
function updateClock(){
var now = new Date();
var dname = now.getDay(),
mo = now.getMonth(),
dnum = now.getDate(),
yr = now.getFullYear(),
hou = now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
pe = "AM";
if(hou==0){
hou = 12;
}
if(hou>12){
hou -=12;
pe = "PM";
}
Number.prototype.pad = function(digits){
for(var n = this.toString(); n.length<digits; n=0+n);
return n;
}
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var week = ["Sunday", "Monday", "Tusday", "Wednesday", "Thursday", "Friday", "Saturday"];
var ids =["dayName", "month", "dayNum", "year", "hour", "minutes", "seconds", "period"];
var values = [week[dname], months[mo], dnum.pad(2),yr,hou.pad(2),min.pad(2),sec.pad(2),pe];
for(var i=0; i<ids.length;i++){
document.getElementById(ids[i]).firstChild.nodeValue = values[i];
}
for(let i=0; i<alarmListArr.length;i++){
if(alarmListArr[i]==`${hou.pad(2)}:${min.pad(2)}:${sec.pad(2)} ${pe}`){
console.log("Alarm ringing...");
ring.load();
ring.play();
document.querySelector("#stopAlarm").style.visibility= "visible";
}
}
}
function initClock() {
updateClock();
window.setInterval("updateClock()",1000);
}
//Set Alarm section
for(let i=12; i>0;i--){
i=i<10 ? "0"+i :i;
let option = `<option value="${i}">${i}</option>`;
selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option);
}
for(let i=59; i>=0;i--){
i=i<10 ? "0"+i :i;
let option = `<option value="${i}">${i}</option>`;
selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option);
}
for(let i=59; i>=0;i--){
i=i<10 ? "0"+i :i;
let option = `<option value="${i}">${i}</option>`;
selectMenu[2].firstElementChild.insertAdjacentHTML("afterend", option);
}
for(let i=2; i>0;i--){
let ampm = i== 1? "AM":"PM";
let option = `<option value="${ampm}">${ampm}</option>`;
selectMenu[3].firstElementChild.insertAdjacentHTML("afterend", option);
}
//add alarm
function setAlarm(){
document.querySelector("#alarm-h3").innerText = "Alarms";
let time = `${selectMenu[0].value}:${selectMenu[1].value}:${selectMenu[2].value} ${selectMenu[3].value}`;
if(time.includes("setHour") || time.includes("setMinute") || time.includes("setSeconds") || time.includes("AM/PM")){
alert("Please, Select Valide Input");
}else {
alarmCount++;
document.querySelector(".alarmList").innerHTML += `
<div class="alarmLog" id="alarm${alarmCount}">
<span id="span${alarmCount}">${time}</span>
<button class="btn-delete" id="${alarmCount}" onClick="deleteAlarm(this.id)">Delete</button>
</div>`;
alarmTime = `${selectMenu[0].value}:${selectMenu[1].value}:${selectMenu[2].value} ${selectMenu[3].value}`;
alarmListArr.push(alarmTime);
console.log(document.querySelector(".btn-delete").value);
alert(`Your Alarm Set ${alarmTime}.`);
}
}
setAlarmBtn.addEventListener("click",setAlarm);
//delete alarm
function deleteAlarm(click_id){
var element = document.getElementById("alarm"+click_id);
var deleteIndex = alarmListArr.indexOf(document.querySelector("#span"+click_id).innerText);
alarmListArr.splice(deleteIndex,1);
element.remove();
alert(`Your Alarm ${click_id} Delete.`);
}
function stopAlarm(){
ring.pause();
document.querySelector("#stopAlarm").style.visibility= "hidden";
}
You have now successfully built an alarm clock using HTML, CSS, and JavaScript. By clicking on the provided download button, you can download the source code files for this alarm clock in case you run into any issues or your code does not function as it should. The project folder containing source code files will be downloaded in a zip file, and it is free.