{"id":2099,"date":"2022-07-06T14:31:06","date_gmt":"2022-07-06T09:31:06","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2099"},"modified":"2022-10-08T13:12:59","modified_gmt":"2022-10-08T08:12:59","slug":"create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/","title":{"rendered":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3"},"content":{"rendered":"\n

In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone<\/strong>\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript alarm clock app is given below.<\/p>\n\n\n\n

You can download the full source code (including images and ringtone) of this JavaScript alarm clock app at the end of this article.<\/p>\n\n\n\n

JavaScript Alarm Clock App Source Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en" dir="ltr">\n  <head>\n    <meta charset="utf-8">\n    <title>Alarm Clock in JavaScript<\/title>\n    <link rel="stylesheet" href="style.css">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <\/head>\n  <body>\n    <div class="wrapper">\n      <img src=".\/files\/clock.svg" alt="clock">\n      <h1>00:00:00 PM<\/h1>\n      <div class="content">\n        <div class="column">\n          <select>\n            <option value="Hour" selected disabled hidden>Hour<\/option>\n          <\/select>\n        <\/div>\n        <div class="column">\n          <select>\n            <option value="Minute" selected disabled hidden>Minute<\/option>\n          <\/select>\n        <\/div>\n        <div class="column">\n          <select>\n            <option value="AM\/PM" selected disabled hidden>AM\/PM<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n      <button>Set Alarm<\/button>\n    <\/div>\n\n    <script src="script.js"><\/script>\n\n  <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const currentTime = document.querySelector("h1"),\ncontent = document.querySelector(".content"),\nselectMenu = document.querySelectorAll("select"),\nsetAlarmBtn = document.querySelector("button");\n\nlet alarmTime, isAlarmSet,\nringtone = new Audio(".\/files\/ringtone.mp3");\n\nfor (let i = 12; i > 0; i--) {\n    i = i < 10 ? `0${i}` : i;\n    let option = `<option value="${i}">${i}<\/option>`;\n    selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option);\n}\n\nfor (let i = 59; i >= 0; i--) {\n    i = i < 10 ? `0${i}` : i;\n    let option = `<option value="${i}">${i}<\/option>`;\n    selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option);\n}\n\nfor (let i = 2; i > 0; i--) {\n    let ampm = i == 1 ? "AM" : "PM";\n    let option = `<option value="${ampm}">${ampm}<\/option>`;\n    selectMenu[2].firstElementChild.insertAdjacentHTML("afterend", option);\n}\n\nsetInterval(() => {\n    let date = new Date(),\n    h = date.getHours(),\n    m = date.getMinutes(),\n    s = date.getSeconds(),\n    ampm = "AM";\n    if(h >= 12) {\n        h = h - 12;\n        ampm = "PM";\n    }\n    h = h == 0 ? h = 12 : h;\n    h = h < 10 ? "0" + h : h;\n    m = m < 10 ? "0" + m : m;\n    s = s < 10 ? "0" + s : s;\n    currentTime.innerText = `${h}:${m}:${s} ${ampm}`;\n\n    if (alarmTime === `${h}:${m} ${ampm}`) {\n        ringtone.play();\n        ringtone.loop = true;\n    }\n});\n\nfunction setAlarm() {\n    if (isAlarmSet) {\n        alarmTime = "";\n        ringtone.pause();\n        content.classList.remove("disable");\n        setAlarmBtn.innerText = "Set Alarm";\n        return isAlarmSet = false;\n    }\n\n    let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;\n    if (time.includes("Hour") || time.includes("Minute") || time.includes("AM\/PM")) {\n        return alert("Please, select a valid time to set Alarm!");\n    }\n    alarmTime = time;\n    isAlarmSet = true;\n    content.classList.add("disable");\n    setAlarmBtn.innerText = "Clear Alarm";\n}\n\nsetAlarmBtn.addEventListener("click", setAlarm);<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* Import Google font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody, .wrapper, .content{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\nbody{\n  padding: 0 10px;\n  min-height: 100vh;\n  background: #4A98F7;\n}\n.wrapper{\n  width: 440px;\n  padding: 30px 30px 38px;\n  background: #fff;\n  border-radius: 10px;\n  flex-direction: column;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n.wrapper img{\n  max-width: 103px;\n}\n.wrapper h1{\n  font-size: 38px;\n  font-weight: 500;\n  margin: 30px 0;\n}\n.wrapper .content{\n  width: 100%;\n  justify-content: space-between;\n}\n.content.disable{\n  cursor: no-drop;\n}\n.content .column{\n  padding: 0 10px;\n  border-radius: 5px;\n  border: 1px solid #bfbfbf;\n  width: calc(100% \/ 3 - 5px);\n}\n.content.disable .column{\n  opacity: 0.6;\n  pointer-events: none;\n}\n.column select{\n  width: 100%;\n  height: 53px;\n  border: none;\n  outline: none;\n  background: none;\n  font-size: 19px;\n}\n.wrapper button{\n  width: 100%;\n  border: none;\n  outline: none;\n  color: #fff;\n  cursor: pointer;\n  font-size: 20px;\n  padding: 17px 0;\n  margin-top: 20px;\n  border-radius: 5px;\n  background: #4A98F7;\n}<\/pre><\/div>\n\n\n\n
\n\n\n\n
Download Source Code (including images and ringtone)<\/h2>\n\n\n
Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript alarm clock app is given below. You can download the full source code (including images and ringtone) of this JavaScript alarm clock app at the end of this article. … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nCreate Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-06T09:31:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-08T08:12:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/Build-A-Simple-Alarm-Clock-in-HTML-CSS-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3","description":"In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/","og_locale":"en_US","og_type":"article","og_title":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3","og_description":"In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this","og_url":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-07-06T09:31:06+00:00","article_modified_time":"2022-10-08T08:12:59+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/Build-A-Simple-Alarm-Clock-in-HTML-CSS-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3","datePublished":"2022-07-06T09:31:06+00:00","dateModified":"2022-10-08T08:12:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/"},"wordCount":89,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/Build-A-Simple-Alarm-Clock-in-HTML-CSS-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/","url":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/","name":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/Build-A-Simple-Alarm-Clock-in-HTML-CSS-JavaScript.jpg","datePublished":"2022-07-06T09:31:06+00:00","dateModified":"2022-10-08T08:12:59+00:00","description":"In this tutorial, I will teach you\u00a0how to create a Digital Alarm Clock with Ringtone\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/Build-A-Simple-Alarm-Clock-in-HTML-CSS-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/Build-A-Simple-Alarm-Clock-in-HTML-CSS-JavaScript.jpg","width":880,"height":495,"caption":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/create-digital-alarm-clock-with-ringtone-custom-icons-in-javascript-html5-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=2099"}],"version-history":[{"count":3,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2099\/revisions"}],"predecessor-version":[{"id":3696,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2099\/revisions\/3696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3697"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}