Scribd
Upload
74 views43 pages

Alarm GHA

The document contains the code for an HTML page that displays the time, allows setting alarms, and includes additional features like temperature/humidity display, dark mode toggling, and notifications. It includes the HTML, CSS, and JavaScript code to power these various sections and features of a digital clock/assistant web application.

Uploaded by

amrina ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
74 views43 pages

Alarm GHA

The document contains the code for an HTML page that displays the time, allows setting alarms, and includes additional features like temperature/humidity display, dark mode toggling, and notifications. It includes the HTML, CSS, and JavaScript code to power these various sections and features of a digital clock/assistant web application.

Uploaded by

amrina ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

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">
<!-- <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.8/push.min.js"> -->
<!-- https://cdn-icons-png.flaticon.com/512/2994/2994793.png -->
<title>Good Habits Assistant</title>
</head>

<body>

<!--Show Temperature and Humadity-->

<body>
<div class="temhum">
<div class="th">
<!-- <h1>ESP12E NodeMCU Temperature &amp; Humidity Sensor From PHP
API</h1> -->
<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>

<!-- End Temperature and Humadity -->


<div class="main-container">

<!-- clock section -->


<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>

<!-- set alarm section -->


<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>

<!-- time toggle section -->


<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>

<!-- alarm list section -->


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

</li> -->
</ul>
</div>
</div>

<!-- other stuff section-->

<!-- theme toggle section -->


<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>

<!-- alert section -->


<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>

<!-- start code js for temperature and humadity //opening from a web hosting
server machine (1)-->
<!--
<script type="text/javascript">
document.write([
"\<script src='",
("https:" == document.location.protocol) ? "https://" : "http://",
"ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'
type='text/javascript'>\<\/script>"
].join(''));
</script>
-->

<!-- end code js for temperature and humadity (1) -->

<!-- start code js for temperature and humadity // opening from local machine
(2)-->

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

<!-- end code js for temperature and humadity (2) -->


<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;
flex-direction: column;
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;
justify-content: center;
align-items: center;
flex-direction: column;
transition: all 0.1s ease-in-out;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
}

.clock {
display: flex;
align-items: center;
justify-content: center;

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;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
border: none;
cursor: pointer;
/* background-color: #917d07; */
background-color: #f45c48;
color: rgb(231, 230, 230);
letter-spacing: 1px;
transition: all 0.3s ease-in-out;
box-shadow: 2px 2px 8px black;
display: flex;
justify-content: center;
align-items: center;
}

.local-time-toggle-button:hover {
transform: scale(1.1);
}

.local-time-toggle-button.active {
transform: scale(1.1);
/* background-color: #ab9207; */
background-color: #FF1E00;
}

.theme-toggle {
position: absolute;
top: 1.5%;
right: 1%;
width: auto;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
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 {
background-color: #222324;
color: rgb(215, 213, 213);
box-shadow: 2px 2px 5px black;
}

.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);
transition: all 0.5s ease-in-out;
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;
letter-spacing: 1px;
font-size: 0.6rem;
opacity: 0;
pointer-events: none;
border-radius: 5px;
box-shadow: 1px 1px 3px white;
}

.add-alarm:hover .display-add-alarm {
opacity: 1;
pointer-events: auto;
}

.add-alarm.active:hover .display-add-alarm {
opacity: 0;
pointer-events: none;
}

.display-add-alarm::before {
position: absolute;
width: 50px;
height: 50px;
background-color: white;
}

.display-add-alarm.dark {
background-color: #222324;
color: white;
box-shadow: 2px 2px 5px black;
}

/* set alarm section */


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.set-alarm {
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-between;
margin-top: 15px;
padding: 40px;
padding-bottom: 20px;
border-radius: 10px;
box-shadow: 5px 5px 20px rgb(19, 19, 19);
transition: all 0.3s ease-in-out;
display: none;
background-color: rgba(0, 0, 0, 0.4);
}

.set-alarm.active {
transition: all 0.3s ease-in-out;
display: block;
display: flex;
justify-content: center;
align-items: center;
}

.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;
flex-direction: column;
}

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;
box-shadow: inset -5px -5px 5px rgb(211, 209, 209);
}

.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;
box-shadow: inset -5px -5px 5px rgb(211, 209, 209);
}

.set-sec:focus {
outline: none;
}
.alarm-buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10px;
}

.alarm-info {
font-size: 0.7rem;
letter-spacing: 1px;
}

.set-alarm-button {
width: 7vw;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
padding: 8px;
border-radius: 10px;
border: none;
background-color: #FF1E00;
box-shadow: 4px 4px 10px rgb(43, 43, 43);
color: white;
margin: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

.set-alarm-button:hover {
background-color: #FF1E00;
transform: scale(1.1);
}

.set-am-pm {
display: flex;
justify-content: center;
align-items: center;
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;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
box-shadow: 4px 4px 10px rgb(29, 29, 29);
transition: all 0.3s ease-in-out;
}

.alarm-list-container:hover {
background-color: rgba(0, 0, 0, 0.5);
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;
align-items: center;
}

/* warning alaert notification */

/* alarm set */

.show-notification {
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: space-between;
background: #c0f4d2;
width: 20vw;
height: 6vh;
position: absolute;
right: 0;
top: 2%;
border-radius: 4px;
border-left: 8px solid #27cd6f;
opacity: 0;
pointer-events: none;
}

.show-notification.active {
opacity: 1;
pointer-events: auto;
animation: show_notification 1s ease forwards;
}

.warning {
width: inherit;
height: inherit;
display: flex;
align-items: center;
}

.show-notification-warning-img {
width: 35px;
height: 35px;
background-color: #27cd6f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
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;
justify-content: center;
align-items: center;
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% {
transform: translateX(-10%);
}

80% {
transform: translateX(0%);
}

100% {
transform: translateX(-10px);
}
}

.show-notification.remove {
animation: hide_notification 1s ease forwards;

@keyframes hide_notification {
0% {
transform: translateX(-10px);
}

40% {
transform: translateX(0%);
}

80% {
transform: translateX(-10%);
}

100% {
transform: translateX(100%);
}
}
/* warning notification */

.show-warning {
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: space-between;
background: #ffe1e2;
width: 20vw;
height: 6vh;
position: absolute;
right: 0;
top: 2%;
border-radius: 4px;
border-left: 8px solid #ff4052;
opacity: 0;
pointer-events: none;
}

.show-warning.active {
opacity: 1;
pointer-events: auto;
animation: show_warning 1s ease forwards;
}

.warning {
width: inherit;
height: inherit;
display: flex;
align-items: center;
}

.show-warning-img {
width: 35px;
height: 35px;
background-color: #ff4052;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
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;
justify-content: center;
align-items: center;
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% {
transform: translateX(100%);
}

40% {
transform: translateX(-10%);
}

80% {
transform: translateX(0%);
}

100% {
transform: translateX(-10px);
}
}

.show-warning.remove {
animation: hide_warning 1s ease forwards;
}

@keyframes hide_warning {
0% {
transform: translateX(-10px);
}
40% {
transform: translateX(0%);
}

80% {
transform: translateX(-10%);
}

100% {
transform: translateX(100%);
}
}

/* alarm ringing section */

/* stop alarm section */

#alarm-ringing {
position: absolute;
top: 0%;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
display: none;
}

svg {
width: 100vw;
height: auto;
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}

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;
}

circle:nth-child(2) {
fill: #7841a1;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}

circle:nth-child(3) {
fill: #9366b3;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}

circle:nth-child(4) {
fill: #b392c9;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}

circle:nth-child(5) {
fill: #f6dafc;
-webkit-animation: none;
animation: none;
}

/* light mode */

circle.active:nth-child(1) {
fill: #222424;
}

circle.active:nth-child(2) {
fill: #353535;
}

circle.active:nth-child(3) {
fill: #4c4c4b;
}

circle.active:nth-child(4) {
fill: #676664;
}

circle.active:nth-child(5) {
fill: white;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}

50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

@keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}

50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

@-webkit-keyframes shine {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}

50% {
-webkit-transform: scale(2);
transform: scale(2);
}
}

@keyframes shine {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}

50% {
-webkit-transform: scale(2);
transform: scale(2);
}
}

text {
cursor: pointer;
font-size: 0.5rem;
font-weight: bold;
color: black;
letter-spacing: 1px;
}

/* 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% {
transform: scale(2, 2);
opacity: 0.75;
}

50% {
transform: scale(4, 4);
opacity: 0.5;
}

75% {
transform: scale(6, 6);
opacity: 0.25
}

100% {
transform: scale(8, 8);
opacity: 0
}
}

@keyframes example {
0% {
transform: scale(1, 1);
opacity: 1;
}

25% {
transform: scale(2, 2);
opacity: 0.75;
}

50% {
transform: scale(4, 4);
opacity: 0.5;
}

75% {
transform: scale(6, 6);
opacity: 0.25
}

100% {
transform: scale(8, 8);
opacity: 0
}
}

.snooze-text {
position: absolute;
bottom: 6%;
left: 47.8%;
translate: translateX(-50%);
font-family: poppins;
font-weight: 600;
letter-spacing: 2px;
}

.snooze-text.active {
color: rgb(221, 218, 218);
}

footer {
width: 100vw;
background-color: #121314;
color: white;
height: 2vh;
display: flex;
justify-content: center;
align-items: center;
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;
}

.alarm-list-section {
height: 22vh;
}

.alarm-list-container {
padding: 10px 40px;
margin-bottom: 15px;
}
.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%;
}

.show-notification {
width: 25vw;
height: 7vh;
}

.show-notification-msg {
font-size: 0.8rem;
}

.close-notification {
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 */

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

.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;
}

.alarm-list-section {
height: 22vh;
}

.alarm-list-container {
width: 25vw;
padding: 10px 40px;
margin-bottom: 20px;
}

svg {
position: absolute;
top: 0;
}

circle:nth-child(1) {
r: 130;
}

circle:nth-child(2) {
r: 100;
}

circle:nth-child(3) {
r: 70;
}

circle:nth-child(4) {
r: 50;
}

circle:nth-child(5) {
r: 25;
}

#snooze {
bottom: 20%;
}

.snooze-text {
bottom: 14%;
left: 46.7%;
}

.show-notification {
width: 40vw;
height: 5vh;
}

.show-notification-msg {
font-size: 1rem;
}

.close-notification {
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 */

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

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 {
margin-bottom: 10px;
}

.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;
}

.alarm-list-section {
height: 24vh;
}

.alarm-list-container {
width: 30vw;
padding: 10px 40px;
margin-bottom: 20px;
}

.snooze-text {
left: 45%;
bottom: 10%;
}

.show-notification {
width: 55vw;
height: 6vh;
}

.show-notification-msg {
font-size: 0.6rem;
}

.close-notification {
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 */

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

.set-alarm {
width: 70vw;
}

.set-hour {
width: 8vw;
}

.set-minute {
width: 8vw;
}

.set-sec {
width: 8vw;
}

.set-alarm-button {
width: 30vw;
}

.alarm-list-section {
height: 26vh;
}
.alarm-list-container {
width: 40vw;
}

.show-notification {
width: 65vw;
height: 5vh;
}

.show-notification-msg {
font-size: 0.6rem;
}

.close-notification {
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;
displayhr.innerHTML = '12hr';
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
} else {
displayHour.innerHTML = calculatedHour;
displayhr.innerHTML = '12hr';
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
}
} else if (hour == 0 && ampm == 'AM') {
console.log("in2");
calculatedHour = 12;
displayhr.innerHTML = '12hr';
displayHour.innerHTML = calculatedHour;
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
} else if (hour == 12 && ampm == 'PM'){
console.log("in3");
calculatedHour = 12;
displayHour.innerHTML = calculatedHour;
displayhr.innerHTML = '12hr';
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
}
else {
console.log("in4");
if (hour < 9) {
calculatedHour = Number(hour);
displayHour.innerHTML = "0" + calculatedHour;
displayhr.innerHTML = '12hr';
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
} else {
calculatedHour = Number(hour);
displayHour.innerHTML = calculatedHour;
displayhr.innerHTML = '12hr';
playAlarm(calculatedHour, hour, minute, min, second, sec, ampm);
console.log(calculatedHour, minute, second, ampm);
}
}
}

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

// 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";
setAm.style.fontWeight = "600";
setPm.style.fontWeight = "500";
setPm.style.color = "black"
}
} else {
if (setAmPm.classList.contains('unactive')) {
setPm.style.color = "red";
setPm.style.fontWeight = "600";
setAm.style.fontWeight = "500";
setAm.style.color = 'white';
} else {
setAm.style.color = "red";
setAm.style.fontWeight = "600";
setPm.style.fontWeight = "500";
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');

if (setAmPm.classList.contains('unactive')) {
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');
alarmRingtone.pause();
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');
alarmRingtone.pause();
alarmRingning.style.display = "none";
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(() => {
alarmRingtone.pause();
alarmRingning.style.display = "none";
}, 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();
}
});
}

You might also like