Alarm GHA

Index.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta name="Vikkey" content="Vivek Gupta & IoTMonk">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.3.0/css/all.min.css">
<link rel="icon" href="https://em-content.zobj.net/source/microsoft-
teams/337/alarm-clock_23f0.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.3.0/css/all.min.css">


<title>Good Habits Assistant</title>
</head>
<body>

<body>
<div class="temhum">
<div class="th">

<p id="temperature">
<img src="./images/hot.png" height="60px" width="60px" /> 00
</p>
<p id="humidity">
<img src="./images/humadity.png" height="60px" width="60px" />
00
</p>
</div>
</div>
</body>


<div class="main-container">


<div class="clock-container">
<div class="clock">
<span class="hour">00</span>
<span class="colon">:</span>
<span class="minute">00</span>
<span class="colon">:</span>
<div class="side">
<span class="second">00</span>
<span class="am-pm">--</span>
</div>
</div>
<div class="days">
<span class="month">---</span>
<span class="day">---</span>
<span class="date">00</span>
</div>
<div class="add-alarm">
<img src="https://cdn-icons-png.flaticon.com/512/3524/3524388.png"
alt="add-alarm" class="add-img">
<div><span class="display-add-alarm">Add Alarm</span></div>
</div>


<div class="set-alarm">
<p class="set-alarm-heading">Set Alarm</p>
<div class="alarm-input">
<div>
<input type="number" class="set-hour" id="set-hour"
required="required" placeholder="Hour">
<input type="number" class="set-minute" id="set-minute"
required="required"
placeholder="Minute">
<input type="number" class="set-sec" id="set-sec"
required="required" placeholder="Second">
</div>
<div class="set-am-pm" id="set-am-pm">
<div class="set-am set-am-active" id="set-am">AM</div>
<div>-</div>
<div class="set-pm" id="set-pm">PM</div>
</div>
</div>
<div class="alarm-buttons">
<button class="set-alarm-button">Set Alarm</button>
</div>
</div>
</div>


<div class="local-time-toggle">
<button class="local-time-toggle-button"><span class="display-hr">- - -
-</span><span class="button-span"><i
class="fa-regular fa-clock"></i></button>
</div>


<div class="alarm-list-section" id="alarm-list">
<ul class="alarm-list">

</ul>
</div>
</div>



<div class="theme-toggle">
<span class="display-theme">You are in Dark mode</span>
<img src="https://cdn-icons-png.flaticon.com/512/581/581601.png" alt=""
class="theme-image">
</div>


<div class="show-notification">
<div class="warning">
<div class="show-notification-warning-img"><i class="fa-solid fa-
check"></i></div>
<div class="show-notification-msg" id="notification-msg"></div>
</div>
</div>
<div class="show-warning">
<div class="warning">
<div class="show-warning-img"><i class="fa-solid fa-
exclamation"></i></div>
<div class="show-warning-msg" id="warning-msg"></div>
</div>
</div>
<div id="alarm-ringing">
<svg viewBox="0 30 500 500" width="200" height="200">
<g id="svg" transform="matrix(1, 0, 0, 1, 47, 230)">
<circle cx="200" cy="155" r="75" />
<circle cx="200" cy="155" r="60" />
<circle cx="200" cy="155" r="45" />
<circle cx="200" cy="155" r="30" />
<circle cx="200" cy="155" r="20" />
<text x="200" y="155" text-anchor="middle" dy=".3em">Stop</text>
</g>
</svg>
<div id="snooze">
<div class='wave'></div>
<div class='wave delay1'></div>
<div class='wave delay2'></div>
</div>
<div class="snooze-text">Snooze</div>
</div>
<footer>
<div class="footer-text">@ Good Habits Assistant</div>
</footer>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.8/push.min.js"></script>
<script src="script.js"></script>




<script
src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


<script src="script-th.js"></script>
</body>
</html>
Style.css
@import
url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Poppins&fam
ily=Roboto&family=Roboto+Slab&family=Sofia+Sans:ital,wght@0,100;0,200;0,400;1,300&d
isplay=swap');
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #222324;
font-family: 'Poppins', sans-serif;
color: yellow;
transition: all 0.5s ease-in-out;
overflow-x: hidden;
background-image: url(./images/Desktop\ Pc\ Dark.jpg);
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
body.active {
background-image: url(./images/Desktop\ Pc\ Light.jpg);
background-color: rgb(231, 230, 230);
color: rgb(29, 29, 29);
}
/* Tem and Humadity */

.temhum {
position: absolute;
top: 100px;
right: 70px;
height: 100vh;
padding: 20px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
h1 {
font-family: Helvetica;
color: black;
}
p {
line-height: 60px;
font-family: Helvetica;
color: #fff;
font-size: 50px;
}
img {
vertical-align: middle;
}
/* end Tem and Humadity */
.clock-container {
width: auto;
height: auto;
border-radius: 20px;
display: flex;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.clock {
display: flex;
span {
padding: 5px;
font-size: 5rem;
font-weight: 600;
margin: 10px;
}
.colon {
margin-bottom: 22px;
}
.side {
margin-top: 32px;
margin-left: 10px;
}
.second {
font-size: 2rem;
}
.am-pm {
font-size: 2rem;
margin: 0;
}
.days span {
padding: 5px;
margin: 0;
}
.month {
font-size: 1.5rem;
}
.day {
font-size: 2.5rem;
}
.date {
font-size: 2.5rem;
}
.display-hr {
margin: 0;
font-size: 0.9rem;
letter-spacing: 2px;
}
.button-span {
margin: 0;
padding: 0;
font-size: 0.9rem;
}
i {
font-size: 1rem;
}
.local-time-toggle {
height: 34.5vh;
padding: 50px;
overflow-y: scroll;
position: fixed;
top: 5px;
right: 50px;
}
.local-time-toggle-button {
padding: 4px 28px;
font-size: 0.9rem;
font-weight: 600;
border: none;
cursor: pointer;
/* background-color: #917d07; */
background-color: #f45c48;
color: rgb(231, 230, 230);
box-shadow: 2px 2px 8px black;
display: flex;
}
.local-time-toggle-button:hover {
transform: scale(1.1);
}
.local-time-toggle-button.active {
/* background-color: #ab9207; */
background-color: #FF1E00;
}
.theme-toggle {
position: absolute;
top: 1.5%;
right: 1%;
width: auto;
height: 50px;
display: flex;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.theme-image {
width: 40px;
height: 40px;
filter: drop-shadow(0px 0px 10px rgb(230, 190, 15));
}
.theme-image.active {
filter: drop-shadow(0px 0px 3px rgb(97, 96, 96));
}
.theme-image:hover {
cursor: pointer;
}
.display-theme {
background-color: rgb(231, 230, 230);
font-size: 0.7rem;
color: black;
opacity: 0;
pointer-events: none;
border-radius: 5px;
box-shadow: 2px 2px 5px rgb(189, 189, 189);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.display-theme.active {
color: rgb(215, 213, 213);
}
.display-theme:before {
position: absolute;
width: 50px;
width: 50px;
background-color: aliceblue;
}
.theme-toggle:hover .display-theme {
opacity: 1;
pointer-events: auto;
}
/* alarm section */
.add-alarm {
height: 34.5vh;
padding: 50px;
overflow-y: scroll;
position: fixed;
top: -10%;
left: -120%;
}
.add-img {
width: 30px;
height: 30px;
filter: brightness(0) invert(1);
cursor: pointer;
margin: 10px;
}
.add-img.alarm-dark {
filter: brightness(0.5) invert(0);
}
.add-img.alarm-dark.dark.active {
filter: brightness(0.5) invert(0);
.add-img.active {
transform: rotate(135deg) scale(1.1);
filter: brightness(0) invert(1);
}
.display-add-alarm {
background-color: yellow;
color: black;
font-size: 0.6rem;
opacity: 0;
border-radius: 5px;
box-shadow: 1px 1px 3px white;
}
.add-alarm:hover .display-add-alarm {
opacity: 1;
}
.add-alarm.active:hover .display-add-alarm {
opacity: 0;
}
.display-add-alarm::before {
position: absolute;
width: 50px;
height: 50px;
background-color: white;
}
.display-add-alarm.dark {
color: white;
}
/* set alarm section */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.set-alarm {
width: auto;
display: flex;
justify-content: space-between;
margin-top: 15px;
padding: 40px;
padding-bottom: 20px;
display: none;
background-color: rgba(0, 0, 0, 0.4);
}
.set-alarm.active {
display: block;
display: flex;
}
.set-alarm.dark {
box-shadow: 5px 5px 10px rgb(210, 210, 210),
/* inset 5px 5px 10px rgb(228, 228, 228); */
}
.set-alarm-heading {
margin-top: 0;
font-size: 0.9rem;
font-weight: 600;
}
.alarm-input {
display: flex;
}
input {
margin: 0px 10px;
}
.set-am-pm {
display: flex;
margin-top: 20px;
}
.set-hour {
width: 4.5vw;
height: 2vh;
padding: 10px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 6px;
border: none;
box-shadow: inset -5px -5px 5px rgb(211, 209, 209);
}
.set-hour:focus {
outline: none;
}
.set-minute {
width: 4.5vw;
height: 2vh;
padding: 10px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 6px;
border: none;
}
.set-minute:focus {
outline: none;
}
.set-sec {
width: 4.5vw;
height: 2vh;
padding: 10px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 6px;
border: none;
}
.set-sec:focus {
outline: none;
}
.alarm-buttons {
display: flex;
margin-top: 10px;
}
.alarm-info {
font-size: 0.7rem;
}
.set-alarm-button {
width: 7vw;
font-size: 1rem;
font-weight: 600;
padding: 8px;
border: none;
color: white;
margin: 10px;
cursor: pointer;
}
.set-alarm-button:hover {
}
.set-am-pm {
display: flex;
font-size: 0.9rem;
}
.set-am {
font-weight: 600;
margin: 0px 5px;
cursor: pointer;
}
.set-pm {
margin: 0px 5px;
cursor: pointer;
}
.set-am-active {
color: red;
}
/* alarm list section */
ul {
padding: 0;
}
.alarm-list-section {
height: 34.5vh;
padding: 20px;
overflow-y: scroll;
position: absolute;
top: 200px;
left: 20px;
.alarm-list-section::-webkit-scrollbar {
display: none;
}
.alarm-list-container {
width: 17vw;
padding: 10px 40px;
display: flex;
}
.alarm-list-container:hover {
cursor: pointer;
}
list {
display: flex;
justify-content: left;
align-items: left;
}
.list span {
padding: 0;
margin: 0;
}
.list-hour-info {
font-size: 1.2rem;
}
.list-minute-info {
font-size: 1.2rem;
}
.list-second-info {
font-size: 1.2rem;
}
.list-am-pm-info {
font-size: 0.6rem;
}
.list-colon {
font-size: 1.2rem;
}
.delete {
width: 34px;
height: 30px;
}
.delete:hover {
cursor: pointer;
}
.delete-img {
display: flex;
}
/* warning alaert notification */
/* alarm set */
.show-notification {
display: flex;
justify-content: flex-end;
background: #c0f4d2;
width: 20vw;
height: 6vh;
position: absolute;
right: 0;
top: 2%;
border-radius: 4px;
border-left: 8px solid #27cd6f;
opacity: 0;
}
.show-notification.active {
opacity: 1;
animation: show_notification 1s ease forwards;
}
.warning {
width: inherit;
height: inherit;
display: flex;
}
.show-notification-warning-img {
width: 35px;
height: 35px;
background-color: #27cd6f;
border-radius: 50%;
display: flex;
margin: 0px 10px;
}
.show-notification-warning-img .fa-exclamation {
color: white;
}
.close-notification {
margin-top: 65px;
width: 60px;
height: 6vh;
transform: translateY(-50%);
background: #94eaba;
cursor: pointer;
display: flex;
margin-left: 10px;
border-radius: 0px 4px 4px 0px;
}
.close-notification .fa-xmark {
font-size: 2rem;
color: #27cd6f;
}
.show-notification-msg {
font-size: 1rem;
color: #27cd6f;
margin: 0px 10px;
}
@keyframes show_notification {
0% {
transform: translateX(100%);
}
40% {
}
80% {
}
100% {
transform: translateX(-10px);
}
}
.show-notification.remove {
animation: hide_notification 1s ease forwards;
@keyframes hide_notification {
0% {
}
40% {
}
80% {
}
100% {
}
}
/* warning notification */
.show-warning {
display: flex;
justify-content: flex-end;
background: #ffe1e2;
width: 20vw;
height: 6vh;
position: absolute;
right: 0;
top: 2%;
border-radius: 4px;
border-left: 8px solid #ff4052;
opacity: 0;
}
.show-warning.active {
opacity: 1;
animation: show_warning 1s ease forwards;
}
.warning {
width: inherit;
height: inherit;
display: flex;
}
.show-warning-img {
width: 35px;
height: 35px;
background-color: #ff4052;
border-radius: 50%;
display: flex;
margin: 0px 10px;
}
.show-warning-img .fa-exclamation {
color: rgb(245, 240, 240);
}
.close-warning {
margin-top: 65px;
width: 60px;
height: 6vh;
transform: translateY(-50%);
background: #ff99a1;
cursor: pointer;
display: flex;
margin-left: 10px;
border-radius: 0px 4px 4px 0px;
}
.close-warning .fa-xmark {
font-size: 2rem;
color: #ff4052;
}
.show-warning-msg {
font-size: 1rem;
color: #ff4052;
margin: 0px 10px;
}
@keyframes show_warning {
0% {
}
40% {
}
80% {
}
100% {
}
}
.show-warning.remove {
animation: hide_warning 1s ease forwards;
}
@keyframes hide_warning {
0% {
}
40% {
}
80% {
}
100% {
}
}
/* alarm ringing section */
/* stop alarm section */
#alarm-ringing {
position: absolute;
top: 0%;
width: 100vw;
height: 100vh;
display: flex;
display: none;
}
svg {
width: 100vw;
height: auto;
position: absolute;
bottom: 0;
left: 0;
display: flex;
}
circle {
-webkit-transform-origin: center;
transform-origin: center;
transform-box: fill-box;
-webkit-animation: pulse 2.5s ease-in-out infinite;
animation: pulse 2.5s ease-in-out infinite;
}
/* dark mode */
circle:nth-child(1) {
fill: #662794;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
fill: #7841a1;
}
fill: #9366b3;
}
fill: #b392c9;
}
fill: #f6dafc;
-webkit-animation: none;
animation: none;
}
/* light mode */
circle.active:nth-child(1) {
fill: #222424;
}
fill: #353535;
}
fill: #4c4c4b;
}
fill: #676664;
}
fill: white;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
}
@keyframes pulse {
0% {
}
50% {
-webkit-transform: scale(1.1);
}
}
@-webkit-keyframes shine {
0% {
}
50% {
}
}
@keyframes shine {
0% {
}
50% {
}
}
text {
cursor: pointer;
font-size: 0.5rem;
font-weight: bold;
color: black;
}
/* snooze section */
#snooze {
position: absolute;
bottom: 13%;
left: 49.2%;
translate: translateX(-50%);
cursor: pointer;
}
.wave {
width: 10px;
height: 10px;
top: 50%;
left: 50%;
background-color: violet;
border-radius: 50%;
position: absolute;
-webkit-animation: example 1.5s linear infinite;
animation: example 1.5s linear infinite;
}
.wave.active {
background-color: white;
}
.delay1 {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.delay2 {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}
@-webkit-keyframes example {
0% {
transform: scale(1, 1);
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.25
}
100% {
opacity: 0
}
}
@keyframes example {
0% {
opacity: 1;
}
25% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
75% {
opacity: 0.25
}
100% {
opacity: 0
}
}
.snooze-text {
position: absolute;
bottom: 6%;
left: 47.8%;
translate: translateX(-50%);
font-family: poppins;
font-weight: 600;
}
.snooze-text.active {
color: rgb(221, 218, 218);
}
footer {
width: 100vw;
color: white;
height: 2vh;
display: flex;
font-size: 0.6rem;
position: fixed;
bottom: 0;
}
/* responsive code section*/
/* laptop */
@media screen and (max-width: 1420px) {
span {
font-size: 4rem;
}
.side {
margin-top: 28px;
margin-left: 0px;
}
.side span {
font-size: 1.1rem;
}
.side .second {
margin: 0;
}
.set-alarm-button {
width: 10vw;
}
.month {
font-size: 1rem;
}
.day {
font-size: 2rem;
}
.date {
font-size: 1.7rem;
}
.add-alarm img {
width: 20px;
height: 20px;
}
.set-hour {
width: 4vw;
height: 1.5vh;
font-size: 1rem;
}
.set-minute {
width: 4vw;
height: 1.5vh;
font-size: 1rem;
}
.set-sec {
width: 4vw;
height: 1.5vh;
font-size: 1rem;
}
.set-alarm {
padding: 15px 25px;
}
.local-time-toggle-button {
padding: 2px 15px;
}
height: 22vh;
}
padding: 10px 40px;
}
.alarm-info span {
font-size: 0.9rem;
}
.list-am-pm-info {
font-size: 0.6rem !important;
}
.delete {
width: 25px;
height: 22px;
}
.theme-toggle {
top: 0.5%;
}
.theme-image {
width: 30px;
height: 30px;
}
#snooze {
bottom: 17%;
}
.snooze-text {
font-size: 0.8rem;
left: 47.7%;
bottom: 6%;
}
width: 25vw;
height: 7vh;
}
font-size: 0.8rem;
}
height: 8vh;
margin-top: 53px;
}
.show-warning {
width: 25vw;
height: 7vh;
}
.show-warning-msg {
font-size: 0.8rem;
}
.close-warning {
height: 8vh;
margin-top: 53px;
}
}
/* tab */
.set-alarm {
width: 50vw;
}
.set-hour {
width: 6vw;
}
.set-minute {
width: 6vw;
}
.set-sec {
width: 6vw;
}
.set-alarm {
width: 35vw;
}
.set-alarm-button {
width: 15vw;
}
height: 22vh;
}
width: 25vw;
padding: 10px 40px;
}
svg {
position: absolute;
top: 0;
}
r: 130;
}
r: 100;
}
r: 70;
}
r: 50;
}
r: 25;
}
#snooze {
bottom: 20%;
}
.snooze-text {
bottom: 14%;
left: 46.7%;
}
width: 40vw;
height: 5vh;
}
font-size: 1rem;
}
height: 5vh;
margin-top: 69px;
}
.show-warning {
width: 40vw;
height: 5vh;
}
.show-warning-msg {
font-size: 1rem;
}
.close-warning {
height: 5vh;
margin-top: 69px;
}
}
/* mobile */
body {
background-image: url(./images/Mobile\ Dark.jpg);
}
body.active {
background-image: url(./images/Mobile\ light.jpg)
}
span {
font-size: 2.5rem;
}
.colon {
font-size: 2rem;
}
.side {
}
.second {
font-size: 1rem;
}
.am-pm {
font-size: 1rem;
}
.set-alarm {
width: 45vw;
}
.set-alarm-heading {
font-size: 0.7rem;
}
.set-am {
font-size: 0.6rem;
}
.set-pm {
font-size: 0.6rem;
}
.set-hour {
width: 6vw;
height: 1vh;
font-size: 0.8rem;
}
.set-minute {
width: 6vw;
height: 1vh;
font-size: 0.8rem;
}
.set-sec {
width: 6vw;
height: 1vh;
font-size: 0.8rem;
}
.set-alarm-button {
width: 20vw;
font-size: 0.8rem;
}
height: 24vh;
}
width: 30vw;
padding: 10px 40px;
}
.snooze-text {
left: 45%;
bottom: 10%;
}
width: 55vw;
height: 6vh;
}
font-size: 0.6rem;
}
height: 6vh;
margin-top: 43px;
}
.show-warning {
width: 55vw;
height: 6vh;
}
.show-warning-msg {
font-size: 0.6rem;
}
.close-warning {
height: 6vh;
margin-top: 43px;
}
/* for smaller mobile */
.set-alarm {
width: 70vw;
}
.set-hour {
width: 8vw;
}
.set-minute {
width: 8vw;
}
.set-sec {
width: 8vw;
}
.set-alarm-button {
width: 30vw;
}
height: 26vh;
}
width: 40vw;
}
width: 65vw;
height: 5vh;
}
font-size: 0.6rem;
}
height: 5vh;
margin-top: 45px;
}
.show-warning {
width: 65vw;
height: 5vh;
}
.show-warning-msg {
font-size: 0.6rem;
}
.close-warning {
height: 5vh;
margin-top: 45px;
}
.snooze-text {
left: 44%;
}
}
Script.js
const displayHour = document.querySelector('.hour');

const displayMinute = document.querySelector('.minute');
const displaySecond = document.querySelector('.second');
const displayAmPm = document.querySelector('.am-pm');
const displayMonth = document.querySelector('.month');
const displayDay = document.querySelector('.day');
const displayDate = document.querySelector('.date');
const localTimeToggle = document.querySelector('.local-time-toggle-button');
const themeToggle = document.querySelector('.theme-image');
const body = document.getElementsByTagName('body')[0];
const displayTheme = document.querySelector('.display-theme');
const displayhr = document.querySelector('.display-hr');
const addAlarm = document.querySelector('.add-img');
const addAlarmDisplay = document.querySelector('.display-add-alarm');
const setAlarm = document.querySelector('.set-alarm');
const setAmPm = document.getElementById('set-am-pm')
const setAlarmButton = document.querySelector('.set-alarm-button');
const cancelAlarmbutton = document.querySelector('.cancel-alarm-button')
const alarmList = document.getElementById('alarm-list');
const deleteButton = document.getElementById('delete');
const alarmRingning = document.getElementById('alarm-ringing');
const circle = document.getElementsByTagName('circle');
const snoozeWave = document.querySelector('.wave');
const snoozeText = document.querySelector('.snooze-text');
alarmRingtone = new Audio("./ringtones/song1.mp3");

let alarmListArr = [];
// local storage
let retrieveAlarm = JSON.parse(localStorage.getItem('LocalStorage'));
if (retrieveAlarm !== null) {

alarmListArr = [...retrieveAlarm];
renderList();
}
// time
function updateTime() {
const date = new Date();
const hour = formatTime(date.getHours());
const minute = formatTime(date.getMinutes());
const min = date.getMinutes();
const second = formatTime(date.getSeconds());
const sec = date.getSeconds();
const month = getMonth(date.getMonth());
const day = getDay(date.getDay());
const currentDate = formatTime(date.getDate());
const ampm = hour >= 12 ? 'PM' : 'AM';
let calculatedHour;
// 24hr /12hr toggle
if (localTime) {
displayHour.innerHTML = hour;
displayhr.innerHTML = '24hr';
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
} else {
if (hour > 12) {
console.log("in1");
calculatedHour = hour - 12;
if (calculatedHour < 10) {
displayHour.innerHTML = '0' + calculatedHour;
} else {
displayHour.innerHTML = calculatedHour;
}
} else if (hour == 0 && ampm == 'AM') {
console.log("in2");
calculatedHour = 12;
} else if (hour == 12 && ampm == 'PM'){
console.log("in3");
calculatedHour = 12;
}
else {
console.log("in4");
if (hour < 9) {
calculatedHour = Number(hour);
displayHour.innerHTML = "0" + calculatedHour;
} else {
calculatedHour = Number(hour);
}
}
}
// display clock
displayMinute.innerHTML = minute;
displaySecond.innerHTML = second;
displayAmPm.innerHTML = ampm;
displayMonth.innerHTML = month;
displayDay.innerHTML = day;
displayDate.innerHTML = currentDate;
}
setInterval(updateTime, 1000);
// play alarm function
function playAlarm(calculatedHour, hour, minute, min, second, sec, ampm) {

for (let i = 0; i < alarmListArr.length; i++) {
if ((alarmListArr[i].hourInput == calculatedHour ||
alarmListArr[i].hourInput == hour) &&
(alarmListArr[i].minuteInput == minute || alarmListArr[i].minuteInput
== min) &&
(alarmListArr[i].secInput == second || alarmListArr[i].secInput == sec)
&&
alarmListArr[i].ampmInput == ampm) {
setTimeout(() => {
alarmRingtone.pause();
alarmRingning.style.display = 'none';
}, 300000);
alarmRingtone.play()
.catch((error)=> {
console.log("Brwoser doesn't play audio without user interaction
after page load");
showWarning("Warning: User interaction is required!");
});
alarmRingtone.loop = true;
alarmRingning.style.display = 'block';
snooze.style.display = 'block';
snoozeText.style.display = 'block';
pushNotification();
}
}
}
// time formate
function formatTime(time) {
if (time < 10) {
return '0' + time;
}
return time;
}
// fetch the month

function getMonth(monthNumber) {
const monthsArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec"];
return monthsArr[monthNumber];
// fetch the day
function getDay(dayNumber) {
const daysArr = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday",];
return daysArr[dayNumber];
}
// 24hr / 12hr toggle
let localTime = false;

localTimeToggle.onclick = function () {
localTimeToggle.classList.toggle('active');
localTime = !localTime;
return localTime;
}
// dark / light theme toggle
themeToggle.onclick = function () {
themeToggle.classList.toggle('active');
body.classList.toggle('active');
displayTheme.classList.toggle('active');
addAlarm.classList.toggle('alarm-dark');
addAlarmDisplay.classList.toggle('dark');
setAlarm.classList.toggle('dark');
addAlarm.classList.toggle('dark');
if (document.body.classList.contains('active')) {
themeToggle.src = "https://cdn-icons-png.flaticon.com/512/869/869869.png";
displayTheme.innerHTML = "You are in Light Mode";
} else {
themeToggle.src = "https://cdn-icons-png.flaticon.com/512/581/581601.png";
displayTheme.innerHTML = "You are in Dark Mode";
}
for (let i = 0; i < circle.length; i++) {
circle[i].classList.toggle('active');
}
snoozeWave.classList.toggle('active');
snoozeText.classList.toggle('active');
}
// add alarm button section
addAlarm.onclick = function () {
addAlarm.classList.toggle('active');
setAlarm.classList.toggle('active');
addAlarmDisplay.classList.toggle('active');
if (addAlarm.classList.contains('active')) {
addAlarmDisplay.innerHTML = "hide";
} else {
addAlarmDisplay.innerHTML = "Add Alarm"
}
}
// am-pm selector section
setAmPm.onclick = function () {
const setAm = document.getElementById('set-am');
const setPm = document.getElementById('set-pm');
setAmPm.classList.toggle('unactive');
if (body.classList.contains('active')) {
if (setAmPm.classList.contains('unactive')) {
setPm.style.color = "red";
setPm.style.fontWeight = "600";
setAm.style.fontWeight = "500";
setAm.style.color = 'black';
} else {
setAm.style.color = "red";
setPm.style.color = "black"
}
} else {
setPm.style.color = "red";
setAm.style.color = 'white';
} else {
setAm.style.color = "red";
setPm.style.color = "white"
}
}
}
// getting data for alarm
var hourInput = document.getElementById('set-hour');

var minuteInput = document.getElementById('set-minute');
var secInput = document.getElementById('set-sec');
var ampmInput = 'AM';

setAlarmButton.onclick = function () {
console.log('set alarm button click');
ampmInput = 'PM';
} else {
ampmInput = 'AM';
}
if (hourInput.value == "" || minuteInput.value == "" || secInput.value == "") {

showWarning("Warning: Please Enter All Fields!")
} else if (hourInput.value > 23 || minuteInput.value > 60 || secInput.value >
60 || hourInput.value < 0 || minuteInput.value < 0 || secInput.value < 0) {
showWarning("Warning: Please Enter Valid Time!")
} else {
showNotification('Sucessfull: Alarm has been Set!');
alarmTime = {
hourInput: hourInput.value,
minuteInput: minuteInput.value,
secInput: secInput.value,
ampmInput: ampmInput,
id: Date.now()
};
alarmListArr.push(alarmTime);
console.log(alarmTime);
renderList();
hourInput.value = "";
minuteInput.value = "";
secInput.value = "";
}
}
// alarm list section
function addAlarmList(alarmTime) {
const li = document.createElement("list");
li.innerHTML = `
<div class="alarm-list-container">
<div class="list">
<div class = "alarm-info">
<span class = list-hour-info>
${alarmTime.hourInput}
</span>
<span class = "list-colon">:</span>
<span class = list-minute-info>
${alarmTime.minuteInput}
</span>
<span class = "list-colon">:</span>
<span class = list-second-info>
${alarmTime.secInput}
</span>
<span class = list-am-pm-info>
${alarmTime.ampmInput}
</span>
</div>
</div>
<div class="delete-img" ${alarmTime.id}>
<img src="https://cdn-icons-png.flaticon.com/512/3299/3299935.png"
class="delete" id="delete" data-id="${alarmTime.id}"/>
</div>
</div>
`;
alarmList.append(li);
}
// stop alarm
const stopAlarm = document.getElementsByTagName('text')[0];
stopAlarm.addEventListener('click', function () {
console.log('stop alarm button clicked');
showNotification("Sucessfull: Alarm has been Stopped!");
alarmRingning.style.display = "none";
});
// snooze alarm
const snooze = document.getElementById('snooze');

snooze.addEventListener('click', function () {
console.log('snooze button clicked');
showNotification("Sucessfull: Alarm has been Snoozed!");
var snoozeCounter = 0;
function snoozeFunction() {
snoozeCounter++;
if (snoozeCounter == 2) {
snooze.style.display = "none";
snoozeText.style.display = "none";
clearInterval(id)
}
setTimeout(() => {
}, 120000);
alarmRingtone.play();
alarmRingning.style.display = "block";
}
var id = setInterval(snoozeFunction, 300000);
});
// delete alarm button
function deletebutton(dataid) {
console.log("Alarm Deleted!");
let newAlarmList = alarmListArr.filter(function (alarmTime) {
// console.log(alarmTime.id)
return alarmTime.id !== Number(dataid);
});
alarmListArr = newAlarmList;
renderList();
showNotification("Sucessfull: Alarm has been Deleted!");
}
document.addEventListener('click', function (e) {

// console.log(e.target);
if (e.target.id == 'delete') {
let dataid = e.target.dataset.id;
console.log(dataid);
deletebutton(dataid);
}
});
// render alarm list
function renderList() {
console.log('Item Rendered!');
localStorage.setItem('LocalStorage', JSON.stringify(alarmListArr));
alarmList.innerHTML = '';
for (let element of alarmListArr) {
addAlarmList(element);
}
}
// popup notification section
// notification
const notification = document.querySelector('.show-notification');

const notificationMsg = document.getElementById('notification-msg');
function showNotification(msg) {
notification.style.display = "block";
notification.classList.remove('remove');
notification.classList.add('active');
notificationMsg.textContent = msg;
setTimeout(() => {
removeNotification();
notification.style.display = "none";
}, 2500);
}
function removeNotification() {
notification.classList.add('remove');
}
// warning
const warning = document.querySelector('.show-warning');

const warningMsg = document.getElementById('warning-msg');
function showWarning(msg) {
warning.style.display = "block";
warning.classList.remove('remove');
warning.classList.add('active');
warningMsg.textContent = msg;
setTimeout(() => {
removeWarning();
warning.style.display = "none";
}, 2500);
}
function removeWarning() {
warning.classList.add('remove');
}
// popup notification section
function pushNotification() {
console.log('push notification');
Push.create("Alarm!!!", {
body: "Your alarm is ringing'?",
icon: 'https://em-content.zobj.net/source/microsoft-teams/337/alarm-
clock_23f0.png',
timeout: 4000,
onClick: function () {
window.focus();
this.close();
}
});
}

Alarm GHA

Uploaded by

Copyright:

Available Formats

Alarm GHA

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Alarm GHA

Uploaded by

Copyright:

Available Formats

Index.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

/* Tem and Humadity */

/* set alarm section */

/* alarm list section */

/* warning alaert notification */

/* alarm ringing section */

/* stop alarm section */

/* responsive code section*/

@media screen and (max-width: 1420px) {

@media screen and (max-width: 920px) {

@media screen and (max-width: 600px) {

/* for smaller mobile */

@media screen and (max-width: 420px) {

const displayHour = document.querySelector('.hour');

alarmRingtone = new Audio("./ringtones/song1.mp3");

let retrieveAlarm = JSON.parse(localStorage.getItem('LocalStorage'));

if (retrieveAlarm !== null) {

// 24hr /12hr toggle

console.log(calculatedHour, minute, second, ampm);

// play alarm function

function playAlarm(calculatedHour, hour, minute, min, second, sec, ampm) {

// fetch the month

// fetch the day

// 24hr / 12hr toggle

let localTime = false;

// dark / light theme toggle

// am-pm selector section

// getting data for alarm

var hourInput = document.getElementById('set-hour');

var ampmInput = 'AM';

if (hourInput.value == "" || minuteInput.value == "" || secInput.value == "") {

// alarm list section

const stopAlarm = document.getElementsByTagName('text')[0];

const snooze = document.getElementById('snooze');

// delete alarm button

document.addEventListener('click', function (e) {

// render alarm list

// popup notification section

const notification = document.querySelector('.show-notification');

const warning = document.querySelector('.show-warning');

// popup notification section

You might also like