How to Create Alarm Clock with HTML
CSS and JavaScript
In this Morning timer, as found in the review picture, there is a computerized clock that shows the ongoing time alongside some caution choices hour, minutes, am/pm. Clients can choose a period and set cautions for any time, whether AM or PM
Video Tutorial of Alarm Clock
Alarm Clock [Source Codes]
To Create Alarm Clock with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Alarm Clock in JavaScript</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <img src="./files/clock.png" 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>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
- body, .wrapper, .content{
- display: flex;
- align-items: center;
- justify-content: center;
- }
- body{
- padding: 0 10px;
- min-height: 100vh;
- background: #282A35;
- }
- .wrapper{
- width: 600px;
- padding: 30px 30px 38px;
- background: #f2f2f2;
- 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;
- 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: 20px;
- border: 1px solid #bfbfbf;
- border-radius: 8px;
-
- }
- .wrapper button {
- width: 100%;
- border: none;
- outline: none;
- color: #fff;
- cursor: pointer;
- font-size: 23px;
- padding: 17px 0;
- margin-top: 20px;
- border-radius: 5px;
- background: #785BF8;
- transition: background-color 0.3s ease;
- }
- .wrapper button:hover {
- background-color: #5c42cc;
- }
-
Now paste the following codes into your script.js file
- 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 = `<option value="${i}">${i}</option>`;
- selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option);
- }
-
- for (let i = 59; i >= 0; i--) {
- i = i < 10 ? `0${i}` : i;
- let option = `<option value="${i}">${i}</option>`;
- selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option);
- }
-
- for (let i = 2; i > 0; i--) {
- let ampm = i == 1 ? "AM" : "PM";
- let option = `<option value="${ampm}">${ampm}</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);
If you face any difficulties while creating Alarm Clock or your code is not working as expected, you can download the source code files by clicking download button.