-- HTML CODE --
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Alarm Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body onload="updateTime(); setTime(); setRingtone(); setInterval(updateTime,1000)">
<!-- created by Cool Programming Projects -->
<div class="main-container">
<!-- controls right-container -->
<div class="controls">
<div class="control-1">
<div class="c-heading">Set Time</div>
<div class="set-time">
<label for="hour-slider">H </label>
<input class="slider" type="range" name="" id="hour-slider" min="0" max="23" oninput="setTime()" value="0" />
</div>
<div class="set-time">
<label for="minute-slider">M </label>
<input class="slider" type="range" name="" id="minute-slider" min="0" max="59" oninput="setTime()"
value="0" />
</div>
<div id="show-alarm-time"></div>
</div>
<div class="control-2">
<div class="c-heading">Set Ringtone</div>
<div class="ringtone-btn-container">
<button id="ringtone1" class="ringtone-btn">1</button>
<button id="ringtone2" class="ringtone-btn">2</button>
<button id="ringtone3" class="ringtone-btn">3</button>
</div>
</div>
<div class="control-3">
<button id="activate-alarm-btn" onclick="setAlarm(); ">Set</button>
<button id="deactivate-alarm-btn" onclick="clearAlarm(); ">
del
</button>
</div>
</div>
<!--clock left-container -->
<div class="clock-container">
<div class="upper-container">
<div id="clock"></div>
</div>
<div class="lower-container" id="lower-container"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
-- CSS CODE --
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main-container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #141414;
}
.controls {
height: 500px;
width: 300px;
box-shadow: inset 5px 5px 10px black, inset 5px 5px 30px rgb(0, 0, 0),
inset -5px -5px 10px #363636, inset -5px -5px 30px #363636;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.control-1,
.control-2 {
margin-top: 20px;
}
.controls .c-heading {
color: #00fffd;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 3px;
font-family: sans-serif;
word-spacing: 6px;
font-size: 20px;
text-align: center;
}
.controls .control-1 {
display: flex;
justify-content: space-around;
align-items: center;
color: white;
flex-direction: column;
}
.control-1 .set-time {
display: flex;
justify-content: center;
align-items: center;
margin: 7px 0px;
}
.slider {
-webkit-appearance: none;
background-color: #141414;
box-shadow: inset 5px 5px 4px black, inset 5px 5px 10px black,
inset -5px -5px 3px #363636, inset -5px -5px 10px #363636;
border-radius: 30px;
height: 10px;
width: 220px;
overflow: hidden;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 10px;
background: #00fd0a;
border-radius: 50%;
border: 2px solid #333;
box-shadow: -207px 0 0 200px #00fd0a;
}
.control-1 #show-alarm-time {
margin: 10px 0px;
text-align: center;
color: #ffffff;
letter-spacing: 2px;
font-size: 20px;
}
.control-2 .ringtone-btn-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 250px;
margin: 10px 0px;
padding: 10px 10px;
}
.control-2 .ringtone-btn-container .ringtone-btn {
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 50%;
box-sizing: border-box;
color: rgb(30, 255, 0);
border: none;
background-color: #141414;
border: 1px solid #00fd0a;
transition: 500ms all;
}
.ringtone-btn-select {
background-color: #141414;
box-shadow: 0px 0px 5px #00fd0a, 0px 0px 25px #00fd0a;
opacity: 1;
}
.control-3 {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.control-3 #activate-alarm-btn,
.control-3 #deactivate-alarm-btn {
padding: 5px 10px;
width: 100px;
font-size: 18px;
letter-spacing: 3px;
text-transform: uppercase;
border: none;
transition: 100ms all;
border-radius: 5px;
cursor: pointer;
word-spacing: 5px;
margin: 0px 10px;
height: 40px;
}
.control-3 #activate-alarm-btn {
background-color: #00ffff;
}
.control-3 #deactivate-alarm-btn {
background-color: #00ffff;
}
.control-3 #activate-alarm-btn:hover {
box-shadow: 0px 0px 10px #00ffff, 0px 0px 50px #00ffff;
}
.control-3 #deactivate-alarm-btn:hover {
box-shadow: 0px 0px 10px #00ffff, 0px 0px 50px #00ffff;
}
.control-3 #activate-alarm-btn:active,
.control-3 #deactivate-alarm-btn:active {
transform: translateY(15px);
}
.clock-container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 800px;
height: 600px;
}
#clock {
padding: 30px 40px;
background-color: #141414;
box-shadow: inset 5px 5px 10px black, inset 5px 5px 30px rgb(0, 0, 0),
inset -5px -5px 10px #363636, inset -5px -5px 30px #363636;
color: rgb(255, 255, 255);
font-size: 60px;
width: 800px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.lower-container {
width: 800px;
height: 300px;
box-shadow: inset 5px 5px 10px black, inset 5px 5px 30px rgb(0, 0, 0),
inset -5px -5px 10px #363636, inset -5px -5px 30px #363636;
}
.gif {
background-image: linear-gradient(rgba(0, 0, 0, 0.212), rgba(0, 0, 0, 0.212)),
url(img/wave1.gif);
background-position: center;
filter: contrast(190%);
object-fit: contain;
background-repeat: no-repeat;
background-color: black;
}
-- JAVASCRIPT CODE --
let currentHours;
let currentMinutes;
let currentMeridian;
let Meridian;
let Hour;
let Minute;
let setMeridian;
let setHour;
let setMinute;
let AlarmSetFlag = 0;
let lowerContainer = document.getElementById('lower-container');
// fetch current time
function updateTime() {
let currentTime = new Date();
currentHours = currentTime.getHours();
currentMinutes = currentTime.getMinutes();
let currentSeconds = currentTime.getSeconds();
let clock = document.getElementById("clock");
let str;
currentMeridian = currentHours >= 12 ? "PM" : "AM";
currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
currentHours = currentHours > 12 ? currentHours - 12 : currentHours;
currentHours = currentHours == 0 ? 12 : currentHours;
currentHours = (currentHours < 10 ? "0" : "") + currentHours;
str =currentHours +" : " +currentMinutes +" : " +currentSeconds +" " +currentMeridian;
clock.innerHTML = str;
}
// select hour and Minute
function setTime() {
setHour = document.getElementById("hour-slider");
setMinute = document.getElementById("minute-slider");
let alarmTime = document.getElementById("show-alarm-time");
let str;
setHour = setHour.value;
setMinute = setMinute.value;
setMeridian = setHour >= 12 ? "PM" : "AM";
setHour = setHour > 12 ? setHour - 12 : setHour;
setHour = setHour == 0 ? 12 : setHour;
setHour = (setHour < 10 ? "0" : "") + setHour;
setMinute = (setMinute < 10 ? "0" : "") + setMinute;
str = setHour + ":" + setMinute + setMeridian;
alarmTime.innerHTML = str;
}
let Ringtone1 = new Audio("audio/ringtone1.mp3");
let Ringtone2 = new Audio("audio/ringtone2.mp3");
let Ringtone3 = new Audio("audio/ringtone3.mp3");
let flag = 0;
// select ringtone
function setRingtone() {
let btn1 = document.getElementById("ringtone1");
let btn2 = document.getElementById("ringtone2");
let btn3 = document.getElementById("ringtone3");
btn1.onclick = function () {
btn1.classList.add("ringtone-btn-select");
btn2.classList.remove("ringtone-btn-select");
btn3.classList.remove("ringtone-btn-select");
Ringtone1.currentTime = 0;
Ringtone1.play();
Ringtone2.pause();
Ringtone3.pause();
flag = 1;
};
btn2.onclick = function () {
btn2.classList.add("ringtone-btn-select");
btn1.classList.remove("ringtone-btn-select");
btn3.classList.remove("ringtone-btn-select");
Ringtone2.currentTime = 0;
Ringtone2.play();
Ringtone1.pause();
Ringtone3.pause();
flag = 2;
};
btn3.onclick = function () {
btn3.classList.add("ringtone-btn-select");
btn2.classList.remove("ringtone-btn-select");
btn1.classList.remove("ringtone-btn-select");
Ringtone3.currentTime = 0;
Ringtone3.play();
Ringtone1.pause();
Ringtone2.pause();
flag = 3;
};
}
// check alarm every 100ms
let Ringtone;
function checkAlarm() {
// currentHours = parseInt(currentHours);
// currentMinutes = parseInt(currentMinutes);
if (currentHours == Hour && currentMinutes == Minute && currentMeridian == Meridian) {
clearInterval(alarmExecute);
Ringtone.currentTime = 0;
Ringtone.play();
Ringtone.loop = true;
lowerContainer.classList.add('gif');
setTimeout(() => {
Ringtone.pause();
AlarmSetFlag = 0;
lowerContainer.classList.remove('gif');
}, 30000);
}
}
let buttonSound = new Audio('audio/button-press.mp3');
// set selected time and ringtone
function setAlarm() {
buttonSound.currentTime = 0;
buttonSound.play();
if (flag == 1) {
Ringtone = Ringtone1;
}
else if (flag == 2) {
Ringtone = Ringtone2;
}
else if (flag == 3) {
Ringtone = Ringtone3;
}
else {
Ringtone = Ringtone1;
}
Hour = parseInt(setHour);
Minute = parseInt(setMinute);
Meridian = setMeridian;
if (AlarmSetFlag == 0) {
AlarmSetFlag = 1;
alarmExecute = setInterval(() => {
checkAlarm();
}, 100);
}
}
function clearAlarm() {
buttonSound.currentTime = 0;
buttonSound.play();
lowerContainer.classList.remove('gif');
Ringtone3.pause();
Ringtone1.pause();
Ringtone2.pause();
Ringtone.loop = false;
AlarmSetFlag = 0;
Ringtone.pause();
clearInterval(alarmExecute);
}
Post a Comment