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.
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.
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
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.
// 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.
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
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.
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.
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.
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.
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.
// 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.
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
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.
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
Create Alarm Clock Using HTML, CSS & JavaScript
Welcome to the CodeWithRandom blog, everyone. This blog teaches us how to make an Alarm Clock. For the Alarm Clock, we employ HTML, CSS, and JavaScript.
The most useful item available today is an alarm clock. An alarm clock helps people wake up on time with its sound. we create a digital clock that displays the time and alarm settings are included.
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.
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.
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.
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.
// 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.
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
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.
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
Create Alarm Clock Using HTML, CSS & JavaScript
Welcome to the CodeWithRandom blog, everyone. This blog teaches us how to make an Alarm Clock. For the Alarm Clock, we employ HTML, CSS, and JavaScript.
The most useful item available today is an alarm clock. An alarm clock helps people wake up on time with its sound. we create a digital clock that displays the time and alarm settings are included.
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.
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.
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.
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.
// 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.
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
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.
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.
Neumorphism | the best neumorphism css card design using html css Neumorphism | the best neumorphism css card design using html css Hello… Welcome to codewithrandom Today I am showing…
Glitch Effect Animation Using Pure CSS Welcome to the Codewithrandom blog. In this blog, we learn how to create Glitch Effect Animation Using Pure CSS. this is the best…
Create a Pagination using HTML, CSS, and JavaScript When we surf any download site or a site from which we can download movies, music, pictures, etc, or let’s just consider…
Password Generator Using HTML, CSS, And JavaScript Dear Reader, Let’s build a password generator which generates passwords of different lengths and which can include or exclude special characters in the…
Create a Custom Countdown | Best Countdown Maker | Html Css Javascript Welcome🎉 to Code With Random blog. In this blog, we learn how we create Custom Countdown. We use HTML,…
Super, make attractive login system.