"alarm app with mp3"
Bootstrap 3.0.0 Snippet by muhittinbudak

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<body style="font-family: 'Strait', sans-serif;">
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<div class="wrapper">
<div class="timer-display">00:00:00</div>
<div class="container">
<div class="inputs">
<input
type="number"
id="hourInput"
placeholder="00"
min="0"
max="23"
/>
<input
type="number"
id="minuteInput"
placeholder="00"
min="0"
max="59"
/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #377dff;
}
.hide {
display: none;
}
.wrapper {
background-color: #ffffff;
width: 90%;
max-width: 31.25em;
padding: 3.12em 5em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 1em;
border-radius: 0.5em;
}
.timer-display {
font-size: 2.18em;
text-align: center;
font-family: "Roboto Mono", monospace;
}
.inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
margin-top: 2em;
}
.inputs input {
width: 2.8em;
font-size: 1.3em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//Initial References
let timerRef = document.querySelector(".timer-display");
const hourInput = document.getElementById("hourInput");
const minuteInput = document.getElementById("minuteInput");
const activeAlarms = document.querySelector(".activeAlarms");
const setAlarm = document.getElementById("set");
let alarmsArray = [];
let alarmSound = new Audio("https://cdn.freesound.org/previews/320/320654_5260872-lq.mp3");
let initialHour = 0,
initialMinute = 0,
alarmIndex = 0;
//Append zeroes for single digit
const appendZero = (value) => (value < 10 ? "0" + value : value);
//Search for value in object
const searchObject = (parameter, value) => {
let alarmObject,
objIndex,
exists = false;
alarmsArray.forEach((alarm, index) => {
if (alarm[parameter] == value) {
exists = true;
alarmObject = alarm;
objIndex = index;
return false;
}
});
return [exists, alarmObject, objIndex];
};
//Display Time
function displayTimer() {
let date = new Date();
let [hours, minutes, seconds] = [
appendZero(date.getHours()),
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3

Questions / Comments: