ALARM CLOCK

Submitted by
SAJAL KUMAR JHA (RA2211003020724)
MOHAMMAD LIYAKAT ALI (RA2211003020725)
PRAKHAR MISHRA(RA2211003020750)

Under the guidance of

Mr. Sitams Vadi Velu

(Assistant Professor, Department of Computer Science and Engineering)
In partial fulfillment for the award of the degree
of

BACHELOR OF TECHNOLOGY
in

COMPUTER SCIENCE AND ENGINEERING

of

COLLEGE OF ENGINEERING AND TECHNOLOGY

RAMAPURAM, CHENNAI-600089

OCTOBER 2023

1
 SRM INSTITUTE OF SCIENCE AND TECHNOLOGY

(Deemed to be University Under Section 3 of UGC Act, 1956)

BONAFIDE CERTIFICATE

Certified that the Mini Project titled “ALARM CLOCK” is the Bonafide certificate
of
SAJAL KUMAR JHA (RA2211003020724), MOHAMMAD LIYAKAT ALI
(RA2211003020725), PRAKHAR MISHRA(RA2211003020750) of II Year
CSE/Specialization submitted for the course 21CSC202J Operating Systems for the
Academic Year 2023 – 24 Odd Semester.

SIGNATURE
Mr. Sitams Vadi Velu
Assistant Professor
Computer Science & Engineering
SRM Institute of Science and Technology
Ramapuran Chennai

2
SCOPE AND OBJECTIVE:

Scope:
Time Management: The primary scope of an alarm clock is to help users manage their time
effectively by allowing them to set alarms for specific times or intervals
.Wake-Up Functionality: Alarm clocks are designed to wake users from sleep at a
designated time, ensuring they start their day punctually.
Reminder System: They can serve as a reminder system, alerting users to important events
or tasks throughout the day.
Customization: Many alarm clocks offer customizable features such as alarm tones, snooze
options, and display settings to meet individual preferences.
Objectives:
Reliability: An alarm clock's main objective is to be reliable, ensuring that it triggers
alarms at the set times consistently

.User-Friendly Interface: It should have an intuitive interface, making it easy for users to
set and manage alarms.

Audible and Visual Alarms: The objective is to offer both audible (sound) and visual (e.g.,
flashing lights) alarm options to accommodate various user needs, including those who are
hearing-impaired.

Snooze Functionality: To allow users to delay waking up, a snooze feature is often
included, with the objective of providing extra rest in short intervals
3
Battery Backup: Some alarm clocks include battery backup functionality to ensure alarms
function even during power outages, meeting the objective of reliability.

Integration: In the digital age, many alarm clocks aim to integrate with other devices like
smartphones, serving as an objective to enhance functionality and convenience.

Variety of Alarms: To cater to user preferences, alarm clocks often offer a variety of alarm
tones and sounds, fulfilling the objective of personalization.

Multiple Alarms: The objective is to allow users to set multiple alarms throughout the day,
enabling them to manage their schedules effectively

4
DESCRIPTION REPORT :ALARM CLOCK

Introduction:

Alarm clocks have been a fundamental part of our daily lives for generations,
iding us in time management and ensuring we start our days punctually. This
report provides an in-depth description of the key features, functionality, and
importance of alarm clocks

Features and Functionality:

Time Display: Alarm clocks typically feature a digital or analog time display,
allowing users to check the current time at a glance.

Alarm Setting: Users can set alarms for specific times, helping them wake up in
the morning, attend appointments, or keep track of tasks.

Alarm Sounds: Alarm clocks offer a variety of sounds and tones, from
traditional beeps and ringing bells to nature sounds and radio stations,
providing users with customizable wake-up options.

Snooze Function: The inclusion of a snooze button allows users to delay the
alarm for a few minutes, granting them a brief period of extra rest.

LED or Backlit Displays: Many modern alarm clocks feature LED displays or
backlit screens, ensuring visibility in the dark.

Battery Backup: To maintain functionality during power outages, some alarm

clocks come equipped with battery backup, ensuring alarms go off as
scheduled.

Radio and Music Playback: Some alarm clocks have built-in radios or the
capability to play music from external devices, adding versatility to the alarm
function.
5
Multiple Alarms: Users can set multiple alarms throughout the day, helping
them manage their schedules effectively

Conclusion:
Alarm clocks, in their various forms, play a vital role in our lives, ensuring we
manage our time effectively and start our days promptly. Their features and
functionality have evolved with technology, offering customization and
reliability, making them indispensable timekeeping tools in the modern world

6
IMPLEMENTATION:
Index:
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Alarm Clock in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<body>
<div class="wrapper">
<img src="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>
7
 <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>

SCRIPT:

const currentTime = document.querySelector("h1"),

content = document.querySelector(".content"),
selectMenu = document.querySelectorAll("select"),
setAlarmBtn = document.querySelector("button");

let alarmTime, isAlarmSet,

ringtone = new Audio("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--) {

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

9
 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);

STYLE.CSS:

/* Import Google font - Poppins */

10
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body, .wrapper, .content{
display: flex;
align-items: center;
justify-content: center;
}
body{
padding: 0 10px;
min-height: 100vh;
background: #565656;
}
.wrapper{
width: 440px;
padding: 30px 30px 38px;
background: #fff;
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;
11
}
.wrapper .content{
width: 100%;
justify-content: space-between;
}
.content.disable{
cursor: no-drop;
}
.content .column{
padding: 0 10px;
border-radius: 5px;
border: 1px solid #bfbfbf;
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: 19px;
}
.wrapper button{
width: 100%;
border: none;
outline: none;
color: #fff;
cursor: pointer;
font-size: 20px;
12
 padding: 17px 0;
margin-top: 20px;
border-radius: 5px;
background: #565656;
}

13
14
15
16