Digital Clock Project Javascript.
Html Files.
Digital Clock Project
Css Files.
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body, .time, .left-side, .right-side, .right-top, .right-down{
display:flex;
justify-content:center;
align-items:center;
}
body{
min-height: 80vh;
background: #2e2e45;}
.digital-clock, .time, .right-side, .right-top, .right-down{
position: relative;
}
.digital-clock{
color: #fff;
padding: 20px 45px;
width: 425px;
background: #2d2f38;
/* box-shadow: 0px 5px 25px rgba(14, 21, 37, .8) ; */
border-radius: 10px;
}
.digital-clock::after{
content: '';
position: absolute;
background: linear-gradient(45deg, blue, orange,green);
background-size: 200% 200%;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
z-index: -1;
filter: blur(30px);
animation: glowing 5s ease infinite;
}
@keyframes glowing{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
#hours{
font-weight: 600px;
padding: 0px 10px;
line-height: 125px;
font-size: 8em;
background: -webkit-linear-gradient(90deg, blue, white);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.right-side{
flex-direction: column;
}
#dots{
font-size: 4em;
transform: translateY(-3px);
color: grey;
}
#minutes{
font-size: 5em;
font-weight: 500;
margin-left: 10px;
transform: translateY(10px);
background: -webkit-linear-gradient(90deg, orchid, white);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.right-down{
margin-left: 10px;
transform: translateY(-25px);
}
#period, #seconds{
font-size: 1.8em;
font-weight: 500;
margin-left: 10px;
}
#period{
color: orange;
}
#seconds{
color: white;
}
Javascript Files.
function clock() {
let hours= document.getElementById('hours');
let minutes= document.getElementById('minutes');
let seconds = document.getElementById('seconds');
let period = document.getElementById('period');
let h= new Date().getHours();
let m= new Date().getMinutes();
let s= new Date().getSeconds();
let ampm= h>=12?"PM" : "AM";
if (h >12) {
h=h-12;
}
h= (h< 10)?"0"+ h:h;
m= (m< 10)?"0"+ m:m;
s= (s< 10)?"0"+ s:s;
hours.innerHTML=h;
minutes.innerHTML=m;
seconds.innerHTML=s;
period.innerHTML= ampm;
}
setInterval(clock,1000);
00
:
00
PM
00
Comments
Post a Comment