Design a Digital Clock in Neumorphism Style using JavaScript

Javascript Front End Technology Programming Scripts Web Development

In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a new design trend that has been gaining popularity in recent years. It is characterized by soft, rounded shapes and subtle shadows.

The HTML

We will start by creating a basic HTML structure for our clock. We will need a container element, and within that, we will have an element for the clock face and another for the control buttons.

Below is the HTML code for our clock −

<div class="clock">
<div class="clock-face">
<div class="clock-display">
<div class="clock-controls">
<button class="clock-button">Start</button>
<button class="clock-button">Stop</button>
</div>
</div>
</div>
</div>

The CSS

Now let's style our clock with CSS. We will give the clock a width and height, and then we will style the clock face and the control buttons.

For the clock face, we will set the width and height to 100%, and we will give it a light grey background color. Then we will add a border and some box-shadow to create the neumorphic effect.

clock-face {
   width: 100%;
   height: 100%;
   background-color: #e0e0e0;
   border: 1px solid #bdbdbd;
   box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
   0px 3px 6px rgba(0,0,0,0.23);
}

For the clock display, we will set the width to 50% and center it within the clock face. Then we will give it a dark grey background color and add some padding.

.clock-display {
   width: 50%;
   margin: 0 auto;
   background-color: #424242;
   padding: 10px;
}

Finally, for the control buttons, we will set the width to 25% and center them within the clock face. We will give them a light grey background color and add some padding.

.clock-controls {
   width: 25%;
   margin: 0 auto;
   background-color: #e0e0e0;
   padding: 10px;
}

The JavaScript

Now let's add the JavaScript code for our clock. We will start by creating a function that will get the current time and display it on the clock face.

function getTime() {
   var date = new Date();
   var hours = date.getHours();
   var minutes = date.getMinutes();
   var seconds = date.getSeconds();
   if (hours < 10) {
      hours = "0" + hours;
   }
   if (minutes < 10) {
      minutes = "0" + minutes;
   }
   if (seconds < 10) {
      seconds = "0" + seconds;
   }
   var time = hours + ":" + minutes + ":" + seconds;
   document.getElementById("clock-display").innerHTML = time;
}

Next, we will create a function that will start the clock when the "Start" button is clicked.

function startClock() {
   setInterval(getTime, 1000);
}

Finally, we will add an event listener to the "Start" button that will call the startClock() function when the button is clicked.

document.getElementById("start-button").addEventListener("click", startClock);

Example

Now that we have all the pieces, let's put them all together. The full working code for our digital clock in neumorphism style is below.

<!DOCTYPE html>
<html>
<head>
<title>Neumorphic Clock</title>
   <style>
      .clock {
         width: 500px;
         height: 400px;
      }
      .clock-face {
         width: 100%;
         height: 100%;
         background-color: #e0e0e0;
         border: 1px solid #bdbdbd;
         box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
         0px 3px 6px rgba(0,0,0,0.23);
      }
      .clock-display {
         width: 50%;
         height: 10%;
         margin: 0 auto;
         background-color: #f0f0f0;
         font-size: xx-large;
         padding: 20px;
         box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
         0px 3px 6px rgba(0,0,0,0.23);
      }
      .clock-controls {
         width: 10%;
         margin: 0 auto;
         background-color: #e0e0e0;
         padding: 10px;
      }
   </style>
</head>
<body>
   <div class="clock">
   <div class="clock-face">
   <div class="clock-display">
   <div id="clock-display"></div>
   </div>
   <div class="clock-controls">
   <button id="start-button" class="clock-button">Start</button>
   </div>
   </div>
   </div>
   <script>
      function getTime() {
         var date = new Date();
         var hours = date.getHours();
         var minutes = date.getMinutes();
         var seconds = date.getSeconds();
         if (hours < 10) {
            hours = "0" + hours;
         }
         if (minutes < 10) {
            minutes = "0" + minutes;
         }
         if (seconds < 10) {
            seconds = "0" + seconds;
         }
         var time = hours + ":" + minutes + ":" + seconds;
         document.getElementById("clock-display").innerHTML = "<center>" + time + "</center>";
      }
      function startClock() {
         setInterval(getTime, 1000);
      }
      document.getElementById("start-button").addEventListener("click", startClock);
   </script>
</body>
</html>

Conclusion

In this article, we discussed how to design a digital clock in neumorphism style using JavaScript. We started by creating a basic HTML structure for our clock. Then we styled our clock with CSS, adding a neumorphic effect with shadows and rounded corners. Finally, we added the JavaScript code to get the current time and display it on the clock face.