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

Copy Code


 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

Copy Code


 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.

5 Comments

Prince Asiedu says:

at

Saw your tweet about the clock, it’s very impressive. Good work done bro. Some of us are still learning.

1. Akinola Abdulakeem says:
  
  at
  
  Thanks
  
Daniel says:

at

i am really enjoying the class

Veteran says:

at

I hope by the time we finish the course I will be able to create a website like this🥺..

1. Akinola Abdulakeem says:
  
  at
  
  Haha, yes of course, sure.

SOURCE CODE of A Simple Wall Clock Using HTML And Neumorphism CSS

5 Comments

Leave a Reply Cancel reply