A Simple 24 Hours Wall Clock Using HTML And Neumorphism CSS
SOURCE CODE of A Simple Wall Clock Using HTML And Neumorphism CSS
<!DOCTYPE html>
<html lang="en">
<title>Responsive Sticky Navigation Menu</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
</body>
</html>
CSS
html {
background: #fff;
text-align: center;
font-size: 11px;
}
body {
margin: 75px;
font-size: 1rem;
display: flex;
min-height: 10vh;
align-items: center;
border-radius: 38px;
background: #f2f2f2;
box-shadow: 6px -6px 8px #a9a9a9,
-6px 6px 8px #ffffff;
}
.clock {
width: 30rem;
height: 30rem;
border-radius: 38px;
background: #f2f2f2;
box-shadow: 6px -6px 8px #a9a9a9,
-6px 6px 8px #ffffff;
border-radius: 70%;
margin: 50px auto;
position: relative;
padding: 2rem;
border-radius: 38px;
background: #f2f2f2;
box-shadow: 6px -6px 8px #a9a9a9,
-6px 6px 8px #ffffff;
}
.outer-clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 100%;
background: #337bee;
overflow: hidden;
border-radius: 38px;
background: #f2f2f2;
box-shadow: 6px -6px 8px #a9a9a9,
-6px 6px 8px #ffffff;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #337bee;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #000;
width: 3px;
}
.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg)
}
.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg)
}
.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg)
}
.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg)
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #fff;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
border-radius: 38px;
background: #f2f2f2;
box-shadow: 6px -6px 8px #a9a9a9,
-6px 6px 8px #ffffff;
}
.hand.hour-hand {
width: 30%;
z-index: 3;
}
.hand.min-hand {
height: 3px;
z-index: 10;
width: 40%;
}
.hand.second-hand {
background: #ee791a;
width: 45%;
height: 2px;
}
JAVASCRIPT
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
Please see the tweet I have embedded below if you wish to know how this is made.
I’ve invested a lot of my time to make WALL CLOCK for yall using HTML, CSS, and JS. It took approximately 72Hrs.
Invest in me too by showering this tweet with likes. And OH yes, you can draw anything with code. Now how did I make this? I’ll show workings, retweet, and let’s go. pic.twitter.com/xXbdohsptv
— Àgbà Akin (@Kynsofficial) December 9, 2021
If you are interested in learning you can start taking my free course on HTML, CSS, and JAVASCRIPT.
Saw your tweet about the clock, it’s very impressive. Good work done bro. Some of us are still learning.
Thanks
i am really enjoying the class
I hope by the time we finish the course I will be able to create a website like this🥺..
Haha, yes of course, sure.