Social Links
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glassmorphism Clock</title>
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="clock">
<div id="day"></div>
<div class="wrapper">
<div id="time"></div>
<div id="midday"></div>
</div>
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #11131e;
}
.container{
width: 450px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.container *{
color: #ffffff;
font-family: "Roboto Mono",monospace;
}
.clock{
width: 100%;
background-color: rgba(255,255,255,0.06);
padding: 50px 25px;
border: 1.5px solid rgba(255,255,255,0.06);
box-shadow: 0 25px 30px rgba(0,0,0,0.15);
backdrop-filter: blur(15px);
border-radius: 10px;
}
#day{
position: relative;
font-size: 20px;
text-transform: uppercase;
color: #c5c5c5;
text-align: center;
}
.wrapper{
text-align: center;
}
#time{
font-size: 70px;
display: inline-block;
}
#midday{
display: inline-block;
font-size: 30px;
}
.shape1{
height: 250px;
width: 250px;
position: absolute;
background: linear-gradient(
45deg,
#ff5b84,
#eb3461
);
border-radius: 50%;
z-index: -1;
bottom: 100px;
right: -100px;
}
.shape2{
height: 250px;
width: 250px;
position: absolute;
background: linear-gradient(
135deg,
#426cf8,
#3ebdf0
);
border-radius: 50%;
top: 100px;
left: -100px;
z-index: -1;
}
JS
Yourvar time = document.getElementById("time");
var day = document.getElementById("day");
var midday = document.getElementById("midday");
var clock = setInterval(
function calcTime(){
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
var middayValue = "AM"
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
day.textContent = days[date_now.getDay()];
middayValue = (hr >= 12) ? "PM" : "AM";
if(hr == 0){
hr = 12;
}
else if(hr > 12){
hr-=12;
}
hr = (hr < 10) ? "0" + hr : hr;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
time.textContent = hr + ":" + min + ":" + sec;
midday.textContent = middayValue;
},
1000
);