Alarm Clock with JavaScript

Digital Alarm clock with JAvaScript

Learn how to create a digital alarm clock with HTML CSS and Javascript.

  • Use HTML to Structure a digital alarm clock.
  • Use CSS to style the clock.
  • For Functionality of Alarm Clock use Javascript.

Source code of HTML file

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alarm Clock</title>
    <link rel="stylesheet" href="style.css">
    <Script src="Alarm.js" defer></Script>
    <div class="container">
        <div class="wrapper">
            <img src="Alarm.jpg" >
            <h1>05:00:00 AM</h1>
            <div class="content">
                <div class="column">
                    <select >
                        <option value="hours" selected hidden>Hour</option>
                <div class="column">
                    <select >
                        <option value="Minutes" selected hidden>Minute</option>
                <div class="column">
                    <select >
                        <option value="AM/PM" selected hidden>AM/PM</option>
            <button>Set Alarm</button>


Body Section (<body>):
  • Container (<div class=”container”>): Creates a container element to group and organize the content. This element likely has styles applied from “style.css” to control its positioning or layout.
  • Wrapper (<div class=”wrapper”>): Another container element within the main container, potentially used for additional layout or styling purposes.
  • Image (<img src=”Alarm.jpg”>): Displays an image named “Alarm.jpg” likely representing a visual of an alarm clock.
  • Current Time (<h1>05:00:00 AM</h1>): Displays a heading (h1) element with the initial time “05:00:00 AM.” This will likely be replaced with the user’s selected alarm time.
  • Content (<div class=”content”>): Another container element, probably used to arrange the clock selection controls.
  • Columns (<div class=”column”>): Three columns are created, each likely styled in “style.css” to arrange the dropdown menus horizontally.
  • Select Controls (<select>): Three dropdown menus are created using the select element. These will presumably allow the user to set hours, minutes, and AM/PM for the alarm time.
  • Placeholder Options (<option value=” hours” selected hidden>Hour</option>): Each dropdown menu has an initial option that displays “Hour,” “Minute,” or “AM/PM” but is disabled (hidden) and has no actual value (value=”hours”). These serve as placeholders until the user selects a valid time.
  • Set Alarm Button (<button>Set Alarm</button>): A button element is created to trigger the alarm setting functionality when clicked. This behavior will likely be implemented in the “Alarm.js” script.

Source code of CSS file

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #74104e;
    width: 400px;
    background: #fff;
    padding: 30px 30px 30px 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
.wrapper img{
    max-width: 300px;
.wrapper .content{
    width: 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
.wrapper .content.disable{
    opacity: 0.7;
    pointer-events: none;
.wrapper .content select{
    font-size: 16px;
    padding: 2px 4px;
    margin: 0 10px;
    border: 1px solid #888888;
    border-radius: 5px;
.wrapper button{
    width: 82%;
    margin-top: 15px;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 600;
    outline: none;
    border: none;
    border-radius: 5px;
    background: #74104e;
    color: #fff;



Imagine this webpage as a stage for your alarm clock. The CSS code acts as the stage manager, meticulously arranging the set pieces and actors (HTML elements) to create a visually captivating performance.

Setting the Stage:
  • The * selector is like a universal backstage crew, ensuring all elements start with zero margins and padding, creating a clean slate. It also sets the “box-sizing” property to a specific mode, making element-sizing calculations more predictable.
The Grand Container:
  • The .container class is the mighty stage itself. It stretches grandly to fill the entire visible area of the browser window (100% width and height), making the most of the available space. It also employs a clever trick called “flexbox” allowing for flexible positioning of the content within. Think of it as a stage that can adapt to different screen sizes. To create a dramatic atmosphere, the stage is bathed in a deep purple (#74104e) background.
The Clock Tower:
  • The .wrapper class represents the clock tower, a central white structure (background: #fff) housing the clock face and controls. It has a width of 400 pixels, ensuring it’s not too large or small. Padding is strategically applied (30px on most sides, 38px on the right) to create a balanced look, potentially accommodating the alarm image. Flexbox is again employed within the tower, arranging elements in a neat column (flex-direction: column). The tower boasts a touch of elegance with rounded corners (border-radius: 8px).
  • The .wrapper img selector focuses on the alarm image within the tower. It acts like a spotlight, ensuring the image doesn’t overflow its designated space by setting a maximum width of 300 pixels.
The Clock Face and Controls:
  • The .wrapper .content class targets the clock face area where the user interacts with the time selection. It stretches across the entire width of the tower (100%) and is positioned below the image with a 30px margin (margin-top: 30px) for better visual separation. Flexbox takes center stage again, ensuring the selection elements are neatly centered both horizontally and vertically.
  • A potential hidden feature is revealed by the .wrapper .content.disable selector. It seems like a stagehand might dim the clock face (opacity: 0.7) and disable user interaction (pointer-events: none) when an alarm is set, preventing accidental changes.
  • The .wrapper .content select selector targets the individual dropdown menus, the heart of the time selection process. Each menu boasts a clear and readable font size of 16 pixels. Padding (2px 4px) and margins (0 10px) create a comfortable space for the user to interact with them. A light gray border (1px solid #888888) defines the menu’s outline, and rounded corners (border-radius: 5px) add a touch of polish.
The Alarm Button:
  • The .wrapper button selector shines a spotlight on the critical alarm button. It occupies a prominent space, taking up 82% of the tower’s width, with some breathing room on either side (margin-top: 15px). The button itself is styled with a bold presence. A generous padding of 10px on the top and bottom provides ample space for the button text. The font size is increased to 18 pixels for better readability, and a weight of 600 makes the text appear bolder. The button boasts a sleek and stylish look with a deep purple background (#74104e) matching the container and crisp white text (#fff) for maximum contrast. There are no outlines or borders to distract from its clean design, and rounded corners (border-radius: 5px) add a touch of sophistication.

Source code of JavaScript

const currentTime = document.querySelector("h1"),
content = document.querySelector(".content"),
selectMenu = document.querySelectorAll("select"),
setAlarmBtn = document.querySelector("button");
let alarmTime = null, isAlarmSet = false,
ringtone = new Audio("ringtone.mp3");
for(let i = 1; i < 13; i++){
    i = i < 10 ? "0" + i : i;
    let option = `<option value="${i}">${i}</option>`;
    selectMenu[0].firstElementChild.insertAdjacentHTML("afterend" , option);
for(let i = 0; i < 60; i++){
    i = i < 10 ? "0" + i : i;
    let option = `<option value="${i}">${i}</option>`;
    selectMenu[1].firstElementChild.insertAdjacentHTML("afterend" , option);
for(let i = 0; i < 2; i++){
    let ampm = i == 0 ? "AM" : "PM"
    let option = `<option value="${ampm}">${ampm}</option>`;
    selectMenu[2].firstElementChild.insertAdjacentHTML("afterend" , option);
    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.loop = true;
function alarm(){
            setAlarmBtn.innerText = "Set Alarm";
            return isAlarmSet = false;
        let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
        if(time.includes("hours") || time.includes("Minutes") || time.includes("AM/PM"))
            return alert("please select a valid time");
        isAlarmSet = true;
        alarmTime = time;
        setAlarmBtn.innerText = "Clear Alarm";







Setting the Stage:
  • The code acts as the stage manager, meticulously arranging the elements:
  • The <h1> element becomes the prominent clock face, displaying the current time in bold letters (currentTime).
  • The element with the class “.content” transforms into the control panel (content), housing the dropdown menus for setting the alarm time.
  • All select elements (dropdown menus) become actors, ready to be dressed with time options (selectMenu). They’ll be positioned strategically on the control panel.
  • The button element becomes the control switch (setAlarmBtn), labeled “Set Alarm” initially, waiting for user interaction.
Props and Costumes:
  • The code prepares the props for the time selection:
  • It creates numerous neatly formatted time options for hours, minutes, and AM/PM, like costumes for the actors (dropdown menus). It ensures single-digit times have leading zeros for a polished look.
  • These options are then strategically placed within the dropdown menus, ready for the user to choose (insertAdjacentHTML).
The Clock’s Performance:
  • The code sets up a continuous loop, like an ever-ticking metronome:
  • Every second, it retrieves the current date and time using a Date object, like a backstage clock prompting the actors (dropdown menus) for their positions.
  • It extracts the hours, minutes, and seconds, akin to the actors moving their hands on the clock face.
  • It handles AM/PM conversion, ensuring a smooth transition between day and night scenes.
  • The extracted time is then meticulously formatted with leading zeros for a polished clock face display (currentTime.innerText).
  • The code constantly checks if the formatted current time matches a pre-set alarm time (alarmTime).
The Alarm Sounds:
  • If the current time matches the pre-set alarm time (alarmTime):
  • The code acts like a sound technician, playing the “ringtone.mp3” audio, and simulating the alarm sound. The ringtone is set to loop (ringtone.loop = true) to create a continuous alarm.
The Control Switch:
  • The “Set Alarm” button awaits user interaction:
  • When clicked, it triggers the alarm function, like a stagehand responding to the user’s command.
  • The alarm function checks if an alarm is currently set (isAlarmSet).
  • If yes, it acts like a stage manager silencing the alarm:
  • It clears the pre-set alarm time (alarmTime).
  • It pauses the ringtone (ringtone.pause()).
  • It reactivates the control panel (content) for user interaction by removing the “disable” class.
  • It resets the button text back to “Set Alarm” for the next alarm setting.
  • If no alarm is set, it initiates the alarm setup:
  • It gathers the user’s chosen time from the dropdown menus, constructing a new alarm time string.
  • It performs a quick check to ensure valid time selection and alerts the user if necessary (e.g., placeholder options selected).
  • If the time is valid, it sets the pre-set alarm time (alarmTime).
  • It disables the control panel (content) to prevent accidental changes during an active alarm.
  • It transforms the button text to “Clear Alarm” indicating an active alarm.

Thanks for reading this Article.

Create a digital alarm clock with HTML CSS and Javascript.

By Sparkify Solutions.

Leave a Comment

Your email address will not be published. Required fields are marked *