Hey friends, today in this blog, you’ll learn how to Build A Simple Alarm Clock in HTML CSS & JavaScript. In the earlier blog,
If you’re feeling difficulty to understand what I’m saying, you can watch a demo or full video tutorial of this Alarm Clock in JavaScript.
Alarm Clock in JavaScript [Source Codes]
You can download the source code files of this Alarm Clock by clicking on the given download button. It’s free and a .zip file will be downloaded, you’ve to extract it. If you’re having any problem with file downloading, you can contact me through the contact page.
First, create an HTML file with the name of index.html and paste the given codes into your HTML file. You’ve to create a file with .html extension and remember you won’t get icons that are used on this post box. Download source files for it.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alarm Clock in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<img src="./files/clock.svg" alt="clock">
<h1>00:00:00 PM</h1>
<div class="content">
<div class="column">
<select>
<option value="Hour" selected disabled hidden>Hour</option>
</select>
</div>
<div class="column">
<select>
<option value="Minute" selected disabled hidden>Minute</option>
</select>
</div>
<div class="column">
<select>
<option value="AM/PM" selected disabled hidden>AM/PM</option>
</select>
</div>
</div>
<button>Set Alarm</button>
</div>
<script src="script.js"></script>
</body>
</html>Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body, .wrapper, .content{
display: flex;
align-items: center;
justify-content: center;
}
body{
padding: 0 10px;
min-height: 100vh;
background: #4A98F7;
}
.wrapper{
width: 440px;
padding: 30px 30px 38px;
background: #fff;
border-radius: 10px;
flex-direction: column;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.wrapper img{
max-width: 103px;
}
.wrapper h1{
font-size: 38px;
font-weight: 500;
margin: 30px 0;
}
.wrapper .content{
width: 100%;
justify-content: space-between;
}
.content.disable{
cursor: no-drop;
}
.content .column{
padding: 0 10px;
border-radius: 5px;
border: 1px solid #bfbfbf;
width: calc(100% / 3 - 5px);
}
.content.disable .column{
opacity: 0.6;
pointer-events: none;
}
.column select{
width: 100%;
height: 53px;
border: none;
outline: none;
background: none;
font-size: 19px;
}
.wrapper button{
width: 100%;
border: none;
outline: none;
color: #fff;
cursor: pointer;
font-size: 20px;
padding: 17px 0;
margin-top: 20px;
border-radius: 5px;
background: #4A98F7;
}
last , create a script file with the name of script.js and paste the given codes in your script file. Remember, you’ve to create a file with .js extension.
const currentTime = document.querySelector("h1"),
content = document.querySelector(".content"),
selectMenu = document.querySelectorAll("select"),
setAlarmBtn = document.querySelector("button");
let alarmTime, isAlarmSet,
ringtone = new Audio("./files/ringtone.mp3");
for (let i = 12; i > 0; i--) {
i = i < 10 ? `0${i}` : i;
let option = ``;
selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option);
}
for (let i = 59; i >= 0; i--) {
i = i < 10 ? `0${i}` : i;
let option = ``;
selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option);
}
for (let i = 2; i > 0; i--) {
let ampm = i == 1 ? "AM" : "PM";
let option = ``;
selectMenu[2].firstElementChild.insertAdjacentHTML("afterend", option);
}
setInterval(() => {
let date = new Date(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
ampm = "AM";
if(h >= 12) {
h = h - 12;
ampm = "PM";
}
h = h == 0 ? h = 12 : h;
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
currentTime.innerText = `${h}:${m}:${s} ${ampm}`;
if (alarmTime === `${h}:${m} ${ampm}`) {
ringtone.play();
ringtone.loop = true;
}
});
function setAlarm() {
if (isAlarmSet) {
alarmTime = "";
ringtone.pause();
content.classList.remove("disable");
setAlarmBtn.innerText = "Set Alarm";
return isAlarmSet = false;
}
let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
if (time.includes("Hour") || time.includes("Minute") || time.includes("AM/PM")) {
return alert("Please, select a valid time to set Alarm!");
}
alarmTime = time;
isAlarmSet = true;
content.classList.add("disable");
setAlarmBtn.innerText = "Clear Alarm";
}
setAlarmBtn.addEventListener("click", setAlarm);
You can download the source code files of this Alarm Clock by clicking on the given download button. It’s free and a .zip file will be downloaded, you’ve to extract it. If you’re having any problem with file downloading, you can contact me through the contact page.
| Downloads |
0 Comments