Design a Digital Clock in Neumorphism Style using JavaScript

JavascriptFront End TechnologyProgramming ScriptsWeb 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.

raja
Updated on 10-Oct-2022 11:34:06

Advertisements