Create Alarm Clock Using HTML ,CSS & JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALARM APP!</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<script src="https://kit.fontawesome.com/6f260fee7a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="table">
<div class="cell">
<h1 id="clock" class="clock"></h1>
<select id="hours"></select>
<select id="minutes"></select>
<select id="seconds"></select>
<select id="ampm">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<p>
<button id="snooze" class="hide">Snooze</button>
<button id="startstop">Set Alarm</button>
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.
<link rel="stylesheet" href="style.css" />
Now, using the <h1> tag, we will add a heading for our alarm clock and an alarm clock icon using the font amazing class.
We will now add a text instructing the user to set the alarm clock’s time using the select element and option. We will now build three input tags for our clock’s input timer. The buttons for starting and stopping the alarm clock will then be added using the button tag.
The alarm clock’s HTML code is complete. You can now see output without Javascript or CSS. After that, CSS and Javascript are used to build the alarm clock.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Only Html Code Output
CSS Code For Alarm Clock
html,
body {
height: 100%;
}
/* background */
body {
background: #333;
text-align: center;
}
/* header */
h1 {
font-family: 'Orbitron', sans-serif;
font-size: 4em;
color: #fff;
}
/* buttons */
button {
cursor: pointer;
margin: 0 5px;
padding: 10px 30px;
background: transparent;
border: 1px solid #ccc;
border-radius: 8px;
outline: 0;
color: #fff;
transition: all ease 300ms;
}
button:hover {
color: #333;
background: #fff;
}
/* center content vertically and horizontally */
.table {
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
cursor: default;
}
/* variable misc classes */
.hide {
display: none;
}Step1: We will set the height to 100% of the document using the html and body tag selectors, and we will use the background property to set the background color to black. We will center all of the text by using the text-align attribute.
Weather App Using Html,Css And JavaScript
Step2: Now, using the h1> tag selector, we will add the styling. The header’s font colour is set to white, the font style is “Orbitron,” and the font size is 4 em.
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
Step3:The styling for the buttons will now be added. The pointer will be set as “cursor” using the tag selector button. The margin and border properties will be set to “0” and 1 px, respectively, of solid grey colour, respectively, around the button. The background colour of the button will change when the user hovers over it thanks to the hover attribute.
/* buttons */
button {
cursor: pointer;
margin: 0 5px;
padding: 10px 30px;
background: transparent;
border: 1px solid #ccc;
border-radius: 8px;
outline: 0;
color: #fff;
transition: all ease 300ms;
}
button:hover {
color: #333;
background: #fff;
}
/* center content vertically and horizontally */
.table {
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
cursor: default;
}
/* variable misc classes */
.hide {
display: none;
}CSS Output:
Create Word Counter Using HTML, CSS & JavaScript (Source Code)
Javascript Code For Alarm Clock
// set our variables
var time, alarm, currentH, currentM,
activeAlarm = false,
sound = new Audio("https://freesound.org/data/previews/316/316847_4939433-lq.mp3");
/*
audio sound source: https://freesound.org/people/SieuAmThanh/sounds/397787/
*/
// loop alarm
sound.loop = true;
// define a function to display the current time
function displayTime() {
var now = new Date();
time = now.toLocaleTimeString();
clock.textContent = time;
// time = "1:00:00 AM";
// watch for alarm
if (time === alarm) {
sound.play();
// show snooze button
snooze.className = "";
}
setTimeout(displayTime, 1000);
}
displayTime();
// add option values relative towards time
function addMinSecVals(id) {
var select = id;
var min = 59;
for (i = 0; i <= min; i++) {
// defined as new Option(text, value)
select.options[select.options.length] = new Option(i < 10 ? "0" + i : i, i < 10 ? "0" + i : i);
}
}
function addHours(id) {
var select = id;
var hour = 12;
for (i = 1; i <= hour; i++) {
// defined as new Option(text, value)
select.options[select.options.length] = new Option(i < 10 ? "0" + i : i, i);
}
}
addMinSecVals(minutes);
addMinSecVals(seconds);
addHours(hours);
// set and clear alarm
startstop.onclick = function() {
// set the alarm
if (activeAlarm === false) {
hours.disabled = true;
minutes.disabled = true;
seconds.disabled = true;
ampm.disabled = true;
alarm = hours.value + ":" + minutes.value + ":" + seconds.value + " " + ampm.value;
this.textContent = "Clear Alarm";
activeAlarm = true;
} else {
// clear the alarm
hours.disabled = false;
minutes.disabled = false;
seconds.disabled = false;
ampm.disabled = false;
sound.pause();
alarm = "00:00:00 AM";
this.textContent = "Set Alarm";
// hide snooze button
snooze.className = "hide";
activeAlarm = false;
}
};
// snooze for 5 minutes
snooze.onclick = function() {
if (activeAlarm === true) {
// grab the current hour and minute
currentH = time.substr(0, time.length - 9);
currentM = time.substr(currentH.length + 1, time.length - 8);
if (currentM >= "55") {
minutes.value = "00";
hours.value = parseInt(currentH) + 1;
} else {
if (parseInt(currentM) + 5 <= 9) {
minutes.value = "0" + parseInt(currentM + 5);
} else {
minutes.value = parseInt(currentM) + 5;
}
}
// hide snooze button
snooze.className = "hide";
// now reset alarm
startstop.click();
startstop.click();
} else {
return false;
}
};Using the var keyword, we will first establish four variables. Then, using the activeAlarm property, we will set the active alarm to “false.” The sound is initially set to false, thus we will use the sound property to retrieve the sound. We’ll get the sound from the URL by using the new Audio attribute.
Gym Website Using HTML and CSS With Source Code
We will then determine whether the time we got and the time we set the alarm for are the same, and if they are, we will play a sound. We have a stop button to help us stop the time, as well as a button for napping five minutes, which we will extend by five more minutes inside the predetermined duration. The alarm clock sound will start with the play() method.
Final Output Of Alarm Clock Using HTML ,CSS & Javascript
Now that we have completed our Alarm Clock Using HTML, CSS & JavaScript. Here is our updated output with JavaScript. Hope you like the Alarm Clock Using JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Video Output:
How To Create OTP Input Field Using HTML , CSS & Javascript
Thank you!
In this post, we learn how to create an Alarm Clock Using HTML, CSS & JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Codepen Preview:
Written by – Code With Random/Anki
A JavaScript alarm clock’s fundamental features consist of setting a specified time for the alarm to sound, and when that time is reached, displaying a message or producing sound. The JavaScript Date object and the setTimeout or setInterval functions can be used to accomplish this.
I hope you enjoy our blog so let’s start with a basic HTML structure for the Alarm Clock.
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML ,CSS and JavaScript |
| External link / Dependencies | Yes |
| Responsive | Yes |
Restaurant Website Using HTML and CSS
HTML Code For Alarm Clock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALARM APP!</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<script src="https://kit.fontawesome.com/6f260fee7a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="table">
<div class="cell">
<h1 id="clock" class="clock"></h1>
<select id="hours"></select>
<select id="minutes"></select>
<select id="seconds"></select>
<select id="ampm">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<p>
<button id="snooze" class="hide">Snooze</button>
<button id="startstop">Set Alarm</button>
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.
<link rel="stylesheet" href="style.css" />
Now, using the <h1> tag, we will add a heading for our alarm clock and an alarm clock icon using the font amazing class.
ADVERTISEMENT
We will now add a text instructing the user to set the alarm clock’s time using the select element and option. We will now build three input tags for our clock’s input timer. The buttons for starting and stopping the alarm clock will then be added using the button tag.
ADVERTISEMENT
The alarm clock’s HTML code is complete. You can now see output without Javascript or CSS. After that, CSS and Javascript are used to build the alarm clock.
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Only Html Code Output
ADVERTISEMENT
CSS Code For Alarm Clock
html,
body {
height: 100%;
}
/* background */
body {
background: #333;
text-align: center;
}
/* header */
h1 {
font-family: 'Orbitron', sans-serif;
font-size: 4em;
color: #fff;
}
/* buttons */
button {
cursor: pointer;
margin: 0 5px;
padding: 10px 30px;
background: transparent;
border: 1px solid #ccc;
border-radius: 8px;
outline: 0;
color: #fff;
transition: all ease 300ms;
}
button:hover {
color: #333;
background: #fff;
}
/* center content vertically and horizontally */
.table {
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
cursor: default;
}
/* variable misc classes */
.hide {
display: none;
}Step1: We will set the height to 100% of the document using the html and body tag selectors, and we will use the background property to set the background color to black. We will center all of the text by using the text-align attribute.
Weather App Using Html,Css And JavaScript
Step2: Now, using the h1> tag selector, we will add the styling. The header’s font colour is set to white, the font style is “Orbitron,” and the font size is 4 em.
Step3:The styling for the buttons will now be added. The pointer will be set as “cursor” using the tag selector button. The margin and border properties will be set to “0” and 1 px, respectively, of solid grey colour, respectively, around the button. The background colour of the button will change when the user hovers over it thanks to the hover attribute.
/* buttons */
button {
cursor: pointer;
margin: 0 5px;
padding: 10px 30px;
background: transparent;
border: 1px solid #ccc;
border-radius: 8px;
outline: 0;
color: #fff;
transition: all ease 300ms;
}
button:hover {
color: #333;
background: #fff;
}
/* center content vertically and horizontally */
.table {
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
cursor: default;
}
/* variable misc classes */
.hide {
display: none;
}CSS Output:
Create Word Counter Using HTML, CSS & JavaScript (Source Code)
Javascript Code For Alarm Clock
// set our variables
var time, alarm, currentH, currentM,
activeAlarm = false,
sound = new Audio("https://freesound.org/data/previews/316/316847_4939433-lq.mp3");
/*
audio sound source: https://freesound.org/people/SieuAmThanh/sounds/397787/
*/
// loop alarm
sound.loop = true;
// define a function to display the current time
function displayTime() {
var now = new Date();
time = now.toLocaleTimeString();
clock.textContent = time;
// time = "1:00:00 AM";
// watch for alarm
if (time === alarm) {
sound.play();
// show snooze button
snooze.className = "";
}
setTimeout(displayTime, 1000);
}
displayTime();
// add option values relative towards time
function addMinSecVals(id) {
var select = id;
var min = 59;
for (i = 0; i <= min; i++) {
// defined as new Option(text, value)
select.options[select.options.length] = new Option(i < 10 ? "0" + i : i, i < 10 ? "0" + i : i);
}
}
function addHours(id) {
var select = id;
var hour = 12;
for (i = 1; i <= hour; i++) {
// defined as new Option(text, value)
select.options[select.options.length] = new Option(i < 10 ? "0" + i : i, i);
}
}
addMinSecVals(minutes);
addMinSecVals(seconds);
addHours(hours);
// set and clear alarm
startstop.onclick = function() {
// set the alarm
if (activeAlarm === false) {
hours.disabled = true;
minutes.disabled = true;
seconds.disabled = true;
ampm.disabled = true;
alarm = hours.value + ":" + minutes.value + ":" + seconds.value + " " + ampm.value;
this.textContent = "Clear Alarm";
activeAlarm = true;
} else {
// clear the alarm
hours.disabled = false;
minutes.disabled = false;
seconds.disabled = false;
ampm.disabled = false;
sound.pause();
alarm = "00:00:00 AM";
this.textContent = "Set Alarm";
// hide snooze button
snooze.className = "hide";
activeAlarm = false;
}
};
// snooze for 5 minutes
snooze.onclick = function() {
if (activeAlarm === true) {
// grab the current hour and minute
currentH = time.substr(0, time.length - 9);
currentM = time.substr(currentH.length + 1, time.length - 8);
if (currentM >= "55") {
minutes.value = "00";
hours.value = parseInt(currentH) + 1;
} else {
if (parseInt(currentM) + 5 <= 9) {
minutes.value = "0" + parseInt(currentM + 5);
} else {
minutes.value = parseInt(currentM) + 5;
}
}
// hide snooze button
snooze.className = "hide";
// now reset alarm
startstop.click();
startstop.click();
} else {
return false;
}
};Using the var keyword, we will first establish four variables. Then, using the activeAlarm property, we will set the active alarm to “false.” The sound is initially set to false, thus we will use the sound property to retrieve the sound. We’ll get the sound from the URL by using the new Audio attribute.
Gym Website Using HTML and CSS With Source Code
We will then determine whether the time we got and the time we set the alarm for are the same, and if they are, we will play a sound. We have a stop button to help us stop the time, as well as a button for napping five minutes, which we will extend by five more minutes inside the predetermined duration. The alarm clock sound will start with the play() method.
Final Output Of Alarm Clock Using HTML ,CSS & Javascript
Now that we have completed our Alarm Clock Using HTML, CSS & JavaScript. Here is our updated output with JavaScript. Hope you like the Alarm Clock Using JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Video Output:
How To Create OTP Input Field Using HTML , CSS & Javascript
Thank you!
In this post, we learn how to create an Alarm Clock Using HTML, CSS & JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Super, make attractive login system.