Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a Digital Clock in Neumorphism Style using JavaScript
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.
440 Views
