Digital clock 2.o
Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Digital clock 2.0</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<div class="name">By Dexter🐺</div>
<div class="container">
<div class="clock">
<div class="imports">
<span id="year"></span>
<span id="month"></span
>
<span class="pm" id="pm_am"></span>
</div>
<div class="cont" id="time">
</div>
<div class="days">
<span class="day" id="sun">Sun</span>
<span class="day" id="mon">Mon</span>
<span class="day" id="tue">Tue</span>
<span class="day" id="wed">wed</span>
<span class="day" id="thur">Thur</span>
<span class="day" id="fri">Fri</span>
<span class="day" id="sat">Sat</span>
</div>
</div>
</div>
</body>
</html>
CSS codes
body {
font-family: 'Orbitron', sans-serif;
background:linear-gradient(to right,#434343,#ff9900,#ff5600)
}
.name {
position:absolute ;
font-size:10px;
transform:scale(0);
animation:show 2s linear 1;
animation-fill-mode:forwards;
}
@keyframes show{
from{transform:scale(0);}
to{transform:scale(1);}
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.day {
font-size:.8rem;
font-weight: 700;
}
.cont {
min-width: 250px;
padding-top: 30px;
background: #ff9900;
text-align: center;
font-size: 60px;
border: .07rem solid #000;
padding-bottom: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
transition:color 1.2s, text-shadow 1s;
}
.cont:hover{
color:#fff;
text-shadow:3px 3px 3px #000;
}
.clock{
margin-top:30%;
}
.pm {
position:absolute;
right: 8px;
text-transform: uppercase;
}
.imports {
position: relative;
}
#month {
position: absolute;
left:45%;
}
#year {
margin-left: 10px;
}
.days {
text-align: center;
margin-top: 5px;
}
Js script
window.addEventListener("load",()=>{
const timeStart=()=>{
const date = new Date();
let hours =date.getHours();
let seconds = date.getSeconds();
let minutes =date.getMinutes();
let month=date.getMonth();
let day=date.getDay();
let pmAm="Am";
let dateS=date.getDate();
switch (month) {
case 0:
month="Jan "+dateS;
// code
break;
case 1:
month="Feb "+dateS;
break;
case 2:
month="Mar "+dateS;
break;
case 3:
month="Apr "+dateS;
break;
case 4:
month="May "+dateS;
break;
case 5:
month="Jun "+dateS;
break;
case 6:
month="Jul "+dateS;
break;
case 7:
month="Aug "+dateS;
break;
case 8:
month="Sep "+dateS;
break;
case 9:
month="Oct "+dateS;
break;
case 10:
month="Nov "+dateS;
break;
case 11:
month="Dec "+dateS;
break;
default:
}
let sun=document.querySelector("#sun");
let mon=document.querySelector("#mon");
let tue=document.querySelector("#tue");
let wed=document.querySelector("#wed");
let thur=document.querySelector("#thur");
let fri=document.querySelector("#fri");
let sat=document.querySelector("#sat");
switch (day) {
case 0:
sun.style.color="aqua";
sun.style.fontSize="1.5rem";
break;
case 1:
mon.style.color="aqua";
mon.style.fontSize="1.5rem";
break;
case 2:
tue.style.color="aqua";
tue.style.fontSize="1.5rem";
break;
case 3:
wed.style.color="aqua";
wed.style.fontSize="1.5rem";
break;
case 4:
thur.style.color="aqua";
thur.style.fontSize="1.5rem";
break;
case 5:
fri.style.color="aqua";
fri.style.fontSize="1.5rem";
break;
case 6:
sat.style.color="aqua";
sat.style.fontSize="1.5rem";
break;
default:
// code
}
if(hours>12){
hours-=12;
pmAm="Pm";
}
if (minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
document.querySelector("#time").innerHTML=hours+":"+minutes+":"+seconds;
document.querySelector("#pm_am").innerHTML=pmAm;
document.querySelector("#year").innerHTML=date.getFullYear();
document.querySelector("#month").innerHTML=month;
};
timeStart();
setInterval(timeStart,500);
});
alert("Don't forget to upvote 😁😁")
Comments