Create Alarm Clock Using HTML ,CSS &#038; JavaScript

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Table of Contents

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.

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.

HTML Output:

Alarm Clock Using HTML ,CSS & JavaScript

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.

Alarm Clock Using HTML ,CSS & JavaScript

Create Word Counter Using HTML, CSS & JavaScript (Source Code)

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.

Alarm Clock Using HTML ,CSS & JavaScript

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:

Alarm Clock Using HTML ,CSS & JavaScript

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.

How To Create OTP Input Field Using HTML , CSS & Javascript

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:

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

FAQ on Alarm Clock Using Javascript

What is an Alarm Clock?
An alarm clock is a web application that acts similar to manual, handmade clocks in which the user has to set alarms for a specific time. It provides a feature for the user to set an alarm for multiple time slots at the same time.
ADVERTISEMENT

What are the benefits of using an alarm clock in Javascript?
The advantages of using a digital alarm clock are:
helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.
ADVERTISEMENT

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.

50+ HTML, CSS & JavaScript Projects With Source Code

What is an Alarm Clock?

What are the benefits of using an alarm clock in Javascript?

The advantages of using a digital alarm clock are:

helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.

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

Alarm Clock Table

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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>

<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.

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.

HTML Output:

Alarm Clock Using HTML ,CSS & JavaScript

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;
}

Alarm Clock Using HTML ,CSS & JavaScript

Create Word Counter Using HTML, CSS & JavaScript (Source Code)

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.

Alarm Clock Using HTML ,CSS & JavaScript

/* 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:

Alarm Clock Using HTML ,CSS & JavaScript

Alarm Clock Using HTML & CSS Code Preview

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;
    }
};

How To Create OTP Input Field Using HTML , CSS & Javascript

Final Output Of Alarm Clock Using HTML,CSS & Javascript

Video Output:

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

FAQ on Alarm Clock Using Javascript

What is an Alarm Clock?

What are the benefits of using an alarm clock in Javascript?

The advantages of using a digital alarm clock are:
helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.

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.

50+ HTML, CSS & JavaScript Projects With Source Code

What is an Alarm Clock?

What are the benefits of using an alarm clock in Javascript?

The advantages of using a digital alarm clock are:

helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.

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

Alarm Clock Table

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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>

<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.

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.

HTML Output:

Alarm Clock Using HTML ,CSS & JavaScript

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;
}

Alarm Clock Using HTML ,CSS & JavaScript

Create Word Counter Using HTML, CSS & JavaScript (Source Code)

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.

Alarm Clock Using HTML ,CSS & JavaScript

/* 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:

Alarm Clock Using HTML ,CSS & JavaScript

Alarm Clock Using HTML & CSS Code Preview

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;
    }
};

How To Create OTP Input Field Using HTML , CSS & Javascript

Final Output Of Alarm Clock Using HTML,CSS & Javascript

Video Output:

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

FAQ on Alarm Clock Using Javascript

What is an Alarm Clock?

What are the benefits of using an alarm clock in Javascript?

The advantages of using a digital alarm clock are:
helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.

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.

50+ HTML, CSS & JavaScript Projects With Source Code

What is an Alarm Clock?

What are the benefits of using an alarm clock in Javascript?

The advantages of using a digital alarm clock are:

helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.

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

Alarm Clock Table

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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>

<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.

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.

HTML Output:

Alarm Clock Using HTML ,CSS & JavaScript

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;
}

Alarm Clock Using HTML ,CSS & JavaScript

Create Word Counter Using HTML, CSS & JavaScript (Source Code)

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.

Alarm Clock Using HTML ,CSS & JavaScript

/* 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:

Alarm Clock Using HTML ,CSS & JavaScript

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;
    }
};

How To Create OTP Input Field Using HTML , CSS & Javascript

Final Output Of Alarm Clock Using HTML,CSS & Javascript

Video Output:

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

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.

50+ HTML, CSS & JavaScript Projects With Source Code

What is an Alarm Clock?

What are the benefits of using an alarm clock in Javascript?

The advantages of using a digital alarm clock are:

helps in increasing efficiency.
Saves Times.
Increase Productivity.
Easy to use.
It allows you to set multiple alarms.

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

Alarm Clock Table

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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>

<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.

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.

HTML Output:

Alarm Clock Using HTML ,CSS & JavaScript

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;
}

Alarm Clock Using HTML ,CSS & JavaScript

Create Word Counter Using HTML, CSS & JavaScript (Source Code)

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.

Alarm Clock Using HTML ,CSS & JavaScript

/* 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:

Alarm Clock Using HTML ,CSS & JavaScript

Alarm Clock Using HTML & CSS Code Preview

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;
    }
};