Skip to content

Commit c28815a

Browse files
dhruti26dhruti26
committed
final commit
1 parent 7b05683 commit c28815a

7 files changed

Lines changed: 193 additions & 0 deletions

File tree

‎Projects/Alarm Setter/Readme.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Alarm setter Website
2+
This website is used to remind ourselves of important tasks by setting an alarm.It can be used in day-to-day life.
3+
4+
## Technologies Used
5+
- HTML5 (structuring)
6+
- CSS (styling)
7+
- JavaScript (client side scripting)
8+
- Git/GitHub (version control)
9+
- Netlify (hosting)
10+
11+
## Sample Output
12+
![Screenshot](image.png)

‎Projects/Alarm Setter/files/clock.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎Projects/Alarm Setter/files/ringtone.mp3‎

399 KB
Binary file not shown.

‎Projects/Alarm Setter/image.png‎

50.3 KB
Loading

‎Projects/Alarm Setter/index.html‎

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

‎Projects/Alarm Setter/script.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const currentTime = document.querySelector("h1"),
2+
content = document.querySelector(".content"),
3+
selectMenu = document.querySelectorAll("select"),
4+
setAlarmBtn = document.querySelector("button");
5+
6+
let alarmTime, isAlarmSet;
7+
let ringtone = new Audio("./files/ringtone.mp3");
8+
9+
for (let i = 12; i > 0; i--) {
10+
i = i < 10 ? `0${i}` : i; //append zero in front if less than 10
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+
//keeps on setting after every second
28+
setInterval(() => {
29+
//displaying current time
30+
let date = new Date(),
31+
h = date.getHours(),
32+
m = date.getMinutes(),
33+
s = date.getSeconds(),
34+
ampm = "AM";
35+
if(h >= 12) {
36+
h = h - 12;
37+
ampm = "PM";
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+
currentTime.innerText = `${h}:${m}:${s} ${ampm}`;
44+
//alarm time == current time fires alarm
45+
if (alarmTime === `${h}:${m} ${ampm}`) {
46+
ringtone.play();
47+
ringtone.loop = true;
48+
}
49+
});
50+
51+
function setAlarm() {
52+
if (isAlarmSet) {
53+
//if alarm is setted already,after completion or removal of alarm
54+
alarmTime = "";
55+
ringtone.pause();
56+
content.classList.remove("disable");
57+
setAlarmBtn.innerText = "Set Alarm";
58+
return isAlarmSet = false;
59+
}
60+
61+
let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
62+
if (time.includes("Hour") || time.includes("Minute") || time.includes("AM/PM")) {
63+
return alert("Please enter a valid time to set Alarm!");
64+
}
65+
alarmTime = time;
66+
isAlarmSet = true;
67+
content.classList.add("disable");
68+
setAlarmBtn.innerText = "Clear Alarm";
69+
}
70+
71+
setAlarmBtn.addEventListener("click", setAlarm);

‎Projects/Alarm Setter/style.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
body, .wrapper, .content{
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
}
13+
body{
14+
padding: 0 10px;
15+
min-height: 100vh;
16+
background: #68bbe4;
17+
}
18+
.wrapper{
19+
width: 440px;
20+
padding: 30px 30px 38px;
21+
background: #fff;
22+
border-radius: 10px;
23+
flex-direction: column;
24+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
25+
}
26+
.wrapper img{
27+
max-width: 103px;
28+
}
29+
.wrapper h1{
30+
font-weight: 500;
31+
margin: 30px 0;
32+
}
33+
.wrapper h1 h3{
34+
font-size: 4vw;
35+
}
36+
.wrapper .content{
37+
width: 100%;
38+
justify-content: space-between;
39+
}
40+
.content.disable{
41+
cursor: no-drop;
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:red;
72+
}

0 commit comments

Comments
 (0)