Skip to content

Commit eb9d70f

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1735 from Abhilasha-Sagar/main
[SSoC 2.0] Alarm Clock
2 parents 778023c + 3a3706c commit eb9d70f

6 files changed

Lines changed: 238 additions & 0 deletions

File tree

‎Projects/Alarm clock/assets/clock.png‎

21 KB
Loading

‎Projects/Alarm clock/assets/digital_alarm.mp3‎

203 KB
Binary file not shown.

‎Projects/Alarm clock/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Alarm Clock</title>
7+
<link href="style.css" rel="stylesheet" type="text/css" />
8+
</head>
9+
<body>
10+
<div class="wrapper">
11+
<img src="./assets/clock.png" alt="clock" />
12+
<h1>00:00:00</h1>
13+
<div class="content">
14+
<div class="column">
15+
<select>
16+
<option value="Hour" selected hidden>Hour</option>
17+
</select>
18+
</div>
19+
<div class="column">
20+
<select>
21+
<option value="Min" selected hidden>Min</option>
22+
</select>
23+
</div>
24+
<div class="column">
25+
<select>
26+
<option value="AM/PM" selected hidden>AM/PM</option>
27+
</select>
28+
</div>
29+
</div>
30+
<button>Set Alarm</button>
31+
</div>
32+
<script src="script.js"></script>
33+
</body>
34+
</html>

‎Projects/Alarm clock/readme.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Alarm Clock Project
2+
3+
This Alarm Clock project is a simple web application built using HTML, CSS, and JavaScript. It allows users to set alarms and get notified when the alarm time is reached.
4+
5+
![Alarm Clock](./assets/clock.png)
6+
7+
## Table of Contents
8+
9+
- [Installation](#installation)
10+
- [Usage](#usage)
11+
- [Features](#features)
12+
- [Contributing](#contributing)
13+
- [License](#license)
14+
15+
## Installation
16+
17+
1. Clone the repository:
18+
19+
```bash
20+
git clone https://github.com/Abhilasha-Sagar/Front-End-Projects.git
21+
```
22+
23+
2. Open the project folder:
24+
25+
```bash
26+
cd Projects
27+
cd Alarm clock
28+
```
29+
30+
3. Open the `index.html` file in a web browser.
31+
32+
## Usage
33+
34+
1. Set the alarm time by selecting the desired hour, minute, and AM/PM from the dropdown menus.
35+
2. Click the "Set Alarm" button to activate the alarm.
36+
3. When the alarm time is reached, a digital alarm sound will play.
37+
38+
## Features
39+
40+
- Set custom alarm times with hour, minute, and AM/PM selection.
41+
- User-friendly interface with a clock display.
42+
- Sound notification when the alarm time is reached.
43+
- Ability to clear or reset the alarm.
44+
45+
## Contributing
46+
47+
Contributions to this project are welcome. To contribute, follow these steps:
48+
49+
1. Fork the repository.
50+
2. Create a new branch: `git checkout -b feature/new-feature`.
51+
3. Make your changes and commit them: `git commit -m 'Add new feature'`.
52+
4. Push to the feature branch: `git push origin feature/new-feature`.
53+
5. Create a pull request detailing your changes.
54+
55+
## License
56+
57+
This project is licensed under the [MIT License](LICENSE).
58+
59+
## Acknowledgments
60+
61+
- Font Awesome - Used clock icon in the project.
62+
- SoundBible - Digital alarm sound used for the alarm.
63+
- CodingNepal

‎Projects/Alarm clock/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const currentTime = document.querySelector("h1");
2+
const selectMenu = document.querySelectorAll("select");
3+
const setAlarmBtn = document.querySelector("button");
4+
const content = document.querySelector(".content");
5+
6+
let alarmTime, isAlarmSet = false,
7+
ringtone = new Audio("./assets/digital_alarm.mp3");
8+
9+
for(let i=12; i>0; i--){
10+
i = i < 10 ? "0" + i : i;
11+
let option = `<option value="${i}">${i}</option>`;
12+
selectMenu[0].firstElementChild.insertAdjacentHTML("afterend",option);
13+
}
14+
15+
for(let i=59; i>=0; i--){
16+
i = i < 10 ? "0" + i : i;
17+
let option = `<option value="${i}">${i}</option>`;
18+
selectMenu[1].firstElementChild.insertAdjacentHTML("afterend",option);
19+
}
20+
21+
for(let i=2; i>0; i--){
22+
let ampm = i == 1 ? "AM" : "PM"
23+
let option = `<option value="${ampm}">${ampm}</option>`;
24+
selectMenu[2].firstElementChild.insertAdjacentHTML("afterend",option);
25+
}
26+
27+
setInterval(()=>{
28+
let date = new Date(),
29+
h = date.getHours(),
30+
m = date.getMinutes(),
31+
s = date.getSeconds(),
32+
ampm = "AM";
33+
34+
if(h >= 12){
35+
h = h-12;
36+
ampm = "PM";
37+
}
38+
39+
h = h == 0 ? h=12 : h;
40+
h = h<10 ? "0" + h : h;
41+
m = m<10 ? "0" + m : m;
42+
s = s<10 ? "0" + s : s;
43+
44+
currentTime.innerText = `${h}:${m}:${s} ${ampm}`;
45+
if(alarmTime === `${h}:${m} ${ampm}`){
46+
ringtone.play();
47+
ringtone.loop = true;
48+
}
49+
})
50+
51+
function setAlarm(){
52+
if(isAlarmSet){
53+
alarmTime = "";
54+
ringtone.pause();
55+
content.classList.remove("disable");
56+
setAlarmBtn.innerText = "Set Alarm";
57+
return isAlarmSet = false;
58+
}
59+
let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
60+
if(time.includes("Hour") || time.includes("Min") || time.includes("AM/PM")){
61+
return alert("Please, select a valid time to set alarm!");
62+
}
63+
isAlarmSet = true;
64+
alarmTime = time;
65+
content.classList.add("disable");
66+
setAlarmBtn.innerText = "Clear Alarm";
67+
}
68+
69+
setAlarmBtn.addEventListener("click",setAlarm);

‎Projects/Alarm clock/style.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* Import Google font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body, .wrapper, .content{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
body{
15+
padding: 0 10px;
16+
min-height: 100vh;
17+
background: #4A98F7;
18+
}
19+
.wrapper{
20+
width: 440px;
21+
padding: 30px 30px 38px;
22+
background: #fff;
23+
border-radius: 10px;
24+
flex-direction: column;
25+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
26+
}
27+
.wrapper img{
28+
max-width: 103px;
29+
}
30+
.wrapper h1{
31+
font-size: 38px;
32+
font-weight: 500;
33+
margin: 30px 0;
34+
}
35+
.wrapper .content{
36+
width: 100%;
37+
justify-content: space-between;
38+
}
39+
.content.disable{
40+
cursor: no-drop;
41+
}
42+
43+
.content .column{
44+
padding: 0 10px;
45+
border-radius: 5px;
46+
border: 1px solid #bfbfbf;
47+
width: calc(100% / 3 - 5px);
48+
}
49+
.content.disable .column{
50+
opacity: 0.6;
51+
pointer-events: none;
52+
}
53+
.column select{
54+
width: 100%;
55+
height: 53px;
56+
border: none;
57+
outline: none;
58+
background: none;
59+
font-size: 19px;
60+
}
61+
.wrapper button{
62+
width: 100%;
63+
border: none;
64+
outline: none;
65+
color: #fff;
66+
cursor: pointer;
67+
font-size: 20px;
68+
padding: 17px 0;
69+
margin-top: 20px;
70+
border-radius: 5px;
71+
background: #4A98F7;
72+
}

0 commit comments

Comments
 (0)