You are currently viewing Create Alarm Clock Using HTML ,CSS & JavaScript

Create Alarm Clock Using HTML ,CSS & JavaScript

Create Alarm Clock Using HTML ,CSS & JavaScript

Create Alarm Clock Using HTML ,CSS & JavaScript
Create Alarm Clock Using HTML ,CSS & JavaScript

 

Welcome to the CodeWithRandom blog. In this blog, We learn how to Create the Alarm Clock. We use HTML, CSS, and JavaScript for the Alarm Clock.

I hope you enjoy our blog so let’s start with a basic HTML structure for the Alarm Clock.

HTML Code For Alarm Clock

Table of Contents

<!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/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/6f260fee7a.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<h1>ALARM APP
<i class="far fa-clock"></i>
</h1>
</nav>
<div class="container">
<p>Enter the time</p>
<div class="inputs">
<input type="number" id="txt" placeholder="" class="time" autocomplete="off">
<span>:</span>
<input type="number" id="txt2" placeholder="" class="time" autocomplete="off">
</div>
<div class="btns">
<button id="btn" class="butt">SET</button>
<button id="btn2" class="butt">STOP</button>
</div>
<div class="info">
<p id="para"></p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

There is all the HTML Code for the Alarm Clock. Now, you can see output without Css and Javascript. then we write Css and javascript for the Alarm Clock.

50+ Html ,Css & Javascript Projects With Source Code

Only Html Code Output

Alarm Clock Using HTML ,CSS & JavaScript
Alarm Clock Using HTML Code Preview

CSS Code For Alarm Clock

:root {
--bg-prim: #12181b;
--bg-sec: #383838;
--clr: #ffffff;
}
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: var(--bg-prim);
}
nav {
text-align: center;
padding: 0.1rem;
color: var(--clr);
background-color: var(--bg-sec);
}
.container {
margin: 5rem auto;
background-color: var(--bg-sec);
padding: 1rem;
color: var(--clr);
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
width: 40rem;
border-radius: 10px;
}
span {
font-size: 1.3rem;
}
.time {
text-align: center;
outline: none;
font-size: 1.5rem;
height: 3rem;
margin: 1rem;
width: 5rem;
}
.butt {
font-size: 1rem;
margin-top: 0.6rem;
outline: none;
border: none;
width: 5rem;
padding: 0.55rem;
cursor: pointer;
color: #fff;
border-radius: 4px;
background-color: hsl(217deg 99% 65%);
}
#btn2 {
visibility: hidden;
display: block;
}
p {
font-size: 1.3rem;
}
@media (max-width: 650px) {
.container {
width: 20rem;
}
}

Html and Css Updated output Of Alarm Clock

Alarm Clock Using HTML ,CSS & JavaScript
Alarm Clock Using HTML & CSS Code Preview

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

Javascript Code For Alarm Clock

let para = document.getElementById('apara');
let text = document.getElementById('txt');
let text2 = document.getElementById('txt2');
let btn = document.getElementById('btn');
let btn2 = document.getElementById('btn2');
window.addEventListener('load', () => {
text.placeholder = new Date().getHours();
text2.placeholder = new Date().getMinutes();
});
btn.addEventListener('click', alarm);
let x;
function alarm() {
if (text.value && text2.value) {
x = setInterval(() => {
setAlarm();
}, 1000);
} else {
alert('ENTER THE HRS AND MINS!');
}
}
function setAlarm() {
let d = new Date().toLocaleDateString();
let then = new Date(`${d} ${text.value}:${text2.value}`).getTime();
// text.value = text.value % 12 || 12;
let now = new Date().getTime();
let distance = then - now;
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
para.innerHTML = `ALARM IN - ${hours}:${minutes}:${seconds}`;
if (distance < 0) {
clearInterval(x);
para.innerHTML = `IT'S ALARM TIME!`;
let audio = new Audio('sound.mp3');
audio.play();
btn2.style.visibility = 'visible';
btn2.addEventListener('click', () => {
para.innerHTML = ``;
audio.pause();
btn2.style.visibility = 'hidden';
text.value = '';
text2.value = '';
});
}
}

Final Output Of Alarm Clock Using HTML ,CSS & JavaScript

Alarm Clock Using HTML ,CSS & JavaScript
Alarm Clock Using HTML ,CSS & JavaScript

 

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.

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

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.

Written by – Code With Random/Anki

This Post Has 0 Comments

  1. Anonymous

    Super, make attractive login system.

Leave a Reply