Skip to content

Commit b99cff2

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #55
1 parent 05be125 commit b99cff2

File tree

7 files changed

+326
-1
lines changed

7 files changed

+326
-1
lines changed

‎Day #55 - Alarm App/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #55
2+
3+
### Alarm App
4+
In this tutorial ([Open in Youtube](https://youtu.be/J_exGTc7CEU)), I am gonna showing to you how to code a Alarm App with html, css and javascript! With this tutorial you can create your own responsive alarm app and set alarms in it, then on time it's starts ringing❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](screenshot.jpg)

‎Day #55 - Alarm App/alarm.mp3

236 KB
Binary file not shown.

‎Day #55 - Alarm App/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Day #55 - Alarm App | AsmrProg</title>
10+
</head>
11+
12+
<body>
13+
14+
<div class="wrapper">
15+
<div class="current-time">00:00:00</div>
16+
<div class="container">
17+
<div class="inputs">
18+
<input type="number" id="hour-input" placeholder="00" min="0" max="23">
19+
<input type="number" id="minute-input" placeholder="00" min="0" max="59">
20+
</div>
21+
<div class="buttons">
22+
<button id="set">Add Alarm</button>
23+
<button id="set" class="clear">Clear All</button>
24+
</div>
25+
<div class="alarms-list"></div>
26+
</div>
27+
</div>
28+
29+
<script src="script.js"></script>
30+
</body>
31+
32+
</html>

‎Day #55 - Alarm App/screenshot.jpg

57.8 KB
Loading

‎Day #55 - Alarm App/script.js

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
const timerRef = document.querySelector(".current-time");
2+
const hourInput = document.getElementById("hour-input");
3+
const minuteInput = document.getElementById("minute-input");
4+
const activeAlarms = document.querySelector(".alarms-list");
5+
const setAlarm = document.getElementById("set");
6+
const clearAllButton = document.querySelector(".clear");
7+
const alarmSound = new Audio("./alarm.mp3");
8+
9+
let alarmIndex = 0;
10+
let alarmsArray = [];
11+
let initialHour = 0;
12+
let initialMinute = 0;
13+
14+
// Helper function to append a leading zero to single-digit values
15+
const appendZero = (value) => (value < 10 ? "0" + value : value);
16+
17+
// Function to display the time and trigger alarms
18+
const displayTimer = () => {
19+
const date = new Date();
20+
const currentTime = date.toLocaleTimeString("en-US", { hour12: false });
21+
timerRef.textContent = currentTime;
22+
23+
// Check if it's time to trigger alarms
24+
alarmsArray.forEach((alarm) => {
25+
if (alarm.isActive && alarm.time === currentTime.slice(0, 5)) {
26+
alarmSound.play();
27+
}
28+
});
29+
};
30+
31+
// Function to create a new alarm
32+
const createAlarm = (hour, minute) => {
33+
alarmIndex += 1;
34+
35+
// Create an alarm object
36+
const alarmObj = {
37+
id: `${alarmIndex}_${hour}_${minute}`,
38+
time: `${appendZero(hour)}:${appendZero(minute)}`,
39+
isActive: false
40+
};
41+
42+
// Add alarm to the array and create it's Ui representation
43+
alarmsArray.push(alarmObj);
44+
const alarmDiv = document.createElement("div");
45+
alarmDiv.className = "alarm";
46+
alarmDiv.dataset.id = alarmObj.id;
47+
alarmDiv.innerHTML = `<span>${alarmObj.time}</span>`;
48+
49+
// Create a checkbox to activate/deactivate the alarm
50+
const checkbox = document.createElement("input");
51+
checkbox.type = "checkbox";
52+
checkbox.addEventListener("change", () => toggleAlarm(alarmObj));
53+
alarmDiv.appendChild(checkbox);
54+
55+
// Create a delete button for the alarm
56+
const deleteButton = document.createElement("button");
57+
// Fontawesome
58+
deleteButton.innerHTML = `<i class="fa-solid fa-trash-can"></i>`;
59+
deleteButton.className = "deleteButton";
60+
deleteButton.addEventListener("click", () => deleteAlarm(alarmObj));
61+
alarmDiv.appendChild(deleteButton);
62+
63+
// Add the alarm Ui to the list of active alarms
64+
activeAlarms.appendChild(alarmDiv);
65+
};
66+
67+
// Function to toggle the alarm's active state
68+
const toggleAlarm = (alarm) => {
69+
alarm.isActive = !alarm.isActive;
70+
if (alarm.isActive) {
71+
const currentTime = new Date().toLocaleTimeString("en-US", { hour12: false }).slice(0, 5);
72+
if (alarm.time === currentTime) {
73+
alarmSound.play();
74+
}
75+
} else {
76+
alarmSound.pause();
77+
}
78+
};
79+
80+
// Function to delete an alarm
81+
const deleteAlarm = (alarm) => {
82+
const index = alarmsArray.indexOf(alarm);
83+
if (index > -1) {
84+
alarmsArray.splice(index, 1);
85+
document.querySelector(`[data-id="${alarm.id}"]`).remove();
86+
}
87+
};
88+
89+
// Event listener for clearing all alarms
90+
clearAllButton.addEventListener("click", () => {
91+
alarmsArray = [];
92+
activeAlarms.innerHTML = "";
93+
});
94+
95+
// Event listener for setting a new alarm
96+
setAlarm.addEventListener("click", () => {
97+
// Parse the input values, default to 0 if empty or NaN
98+
let hour = parseInt(hourInput.value) || 0;
99+
let minute = parseInt(minuteInput.value) || 0;
100+
101+
// Validate the input values
102+
if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
103+
alert("Invalid hour or minute. Please enter values within the valid range!");
104+
return;
105+
}
106+
107+
// Check if an alarm with the same time already exists
108+
if (!alarmsArray.some(alarm => alarm.time === `${appendZero(hour)}:${appendZero(minute)}`)) {
109+
createAlarm(hour, minute);
110+
}
111+
112+
// Clear input fields
113+
[hourInput.value, minuteInput.value] = ["", ""];
114+
});
115+
116+
// Initialize the timer and input fields
117+
window.onload = () => {
118+
setInterval(displayTimer, 1000);
119+
[hourInput.value, minuteInput.value] = ["", ""];
120+
};

‎Day #55 - Alarm App/style.css

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
10+
body{
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
min-height: 100vh;
15+
background-color: #221f2f;
16+
padding: 50px 0;
17+
}
18+
19+
body::after{
20+
content: "";
21+
position: absolute;
22+
background-color: #ed2ff0;
23+
width: 120px;
24+
height: 120px;
25+
left: 75%;
26+
top: 20%;
27+
filter: blur(90px);
28+
}
29+
30+
body::before{
31+
content: "";
32+
position: absolute;
33+
background-color: #22a8cd;
34+
width: 120px;
35+
height: 120px;
36+
left: 10%;
37+
top: 80%;
38+
filter: blur(90px);
39+
}
40+
41+
.wrapper{
42+
color: #fff;
43+
background: rgba(0, 0, 0, 0.44);
44+
width: 50%;
45+
max-width: 31.25em;
46+
padding: 2em;
47+
border-radius: 0.5em;
48+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
49+
backdrop-filter: blur(7.4px);
50+
-webkit-backdrop-filter: blur(7.4px);
51+
border: 1px solid rgba(255, 255, 255, 0.2);
52+
}
53+
54+
.current-time{
55+
font-size: 2.2em;
56+
text-align: center;
57+
}
58+
59+
.inputs{
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
gap: 1em;
64+
margin-top: 1.5em;
65+
}
66+
67+
.inputs input{
68+
width: 3em;
69+
font-size: 1.2em;
70+
border: 1px solid #ccc;
71+
background-color: transparent;
72+
color: #fff;
73+
text-align: center;
74+
border-radius: 0.3em;
75+
padding: 0.4em 0.2em;
76+
}
77+
78+
input::-webkit-outer-spin-button,
79+
input::-webkit-inner-spin-button {
80+
-webkit-appearance: none;
81+
margin: 0;
82+
}
83+
84+
.buttons{
85+
display: flex;
86+
gap: 1.2em;
87+
}
88+
89+
button#set{
90+
background-color: transparent;
91+
border: 1px solid #ccc;
92+
color: #fff;
93+
padding: 0.6em;
94+
width: 100%;
95+
margin: 1.5em auto 0 auto;
96+
border-radius: 0.5em;
97+
cursor: pointer;
98+
transition: all 0.3s ease;
99+
}
100+
101+
button#set:hover{
102+
border-color: #0d47a1;
103+
color: #0d47a1;
104+
}
105+
106+
.alarm{
107+
display: grid;
108+
grid-template-columns: 9fr 1fr 2fr;
109+
margin-top: 1.5em;
110+
align-items: center;
111+
border-bottom: 1px dashed #ccc;
112+
padding-bottom: 0.6em;
113+
}
114+
115+
.alarm input[type="checkbox"]{
116+
appearance: none;
117+
height: 1.6em;
118+
width: 3.75em;
119+
background-color: #e2e2e2;
120+
border-radius: 4px;
121+
position: relative;
122+
cursor: pointer;
123+
outline: none;
124+
}
125+
126+
.alarm input[type="checkbox"]:before{
127+
position: absolute;
128+
content: "";
129+
background-color: #757575;
130+
height: 1.1em;
131+
width: 1.5em;
132+
border-radius: 3px;
133+
top: 0.25em;
134+
left: 0.3em;
135+
}
136+
137+
.alarm input[type="checkbox"]:checked{
138+
background-color: #b3e5fc;
139+
}
140+
141+
.alarm input[type="checkbox"]:checked:before{
142+
background-color: #0d47a1;
143+
left: 2em;
144+
}
145+
146+
.deleteButton{
147+
background-color: transparent;
148+
color: #fff;
149+
border: none;
150+
cursor: pointer;
151+
font-size: 1.5em;
152+
transition: all 0.3s ease;
153+
}
154+
155+
.deleteButton:hover{
156+
color: #0d47a1;
157+
}
158+
159+
@media screen and (max-width: 768px) {
160+
.wrapper{
161+
width: 80%;
162+
}
163+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,9 @@ Here we have list of projects:
6464
52. Email Sender App
6565
53. Url Shortner
6666
54. Glassmorphism Generator
67+
55. Alarm App
6768

68-
## Where is rest 46 Projects
69+
## Where is rest 45 Projects
6970

7071
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
7172
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)