Open In App

Design a Digital Clock in Neumorphism Style using JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

A clock is a device that is used to measure time. Clocks are a useful element for any UI if used in a proper way. Clocks can be used on sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital. Here, we will design the digital clock and add some styling to make it more attractive. This is how the final output will be:

Screenshot-from-2023-06-28-17-33-28.png

Prerequisites:

Approach:

  • Write the digital clock structure using HTML with a dummy time inside div tags.
  • Design the clock in a Neumorphism style using properties like transform and shadow in the CSS.
  • Create a new JavaScript function named showTime() that will be called every second using setTimeout() to render the updated output.
  • Get a new time instance in javascript using the Date() method and convert it into the required string format of “HH:MM:SS”
  • Set time string as output using getElementById and assign value to it.

Example:

Javascript




// script.js
// Function to display the time
function showTime() {
    // Using Date object to get
    // today's date and time
    let date = new Date();
  
    // getHOurs() function is used
    // to get hours ones
    let h = date.getHours(); // 0 - 23
  
    // getMinutes() function is
    // used to get minutes ones
    let m = date.getMinutes(); // 0 - 59
  
    // getSecond() function is
    // used to get seconds ones
    let s = date.getSeconds(); // 0 - 59
  
    // To show am or pm
    let session = "AM";
  
    // Setting time for 12 Hrs format
    if (h > 12) {
        h = h - 12;
        session = "PM";
    } else if (h === 12) {
        session = "PM";
    } else if (h == 0) {
        h = 12;
    }
  
    // Adding "0" before single digit
    h = h < 10 ? "0" + h : h;
    m = m < 10 ? "0" + m : m;
    s = s < 10 ? "0" + s : s;
  
    let time = h + ":" + m + ":" + s + " " + session;
  
    // Using DOM element to display
    // elements on screen
    document.getElementById("MyClockDisplay").innerText =
        time;
  
    document.getElementById("MyClockDisplay").textContent =
        time;
  
    // Call the function every second use
    // setInterval() method and set time-interval
    // as 1000ms which is equal to 1s
    setTimeout(showTime, 1000);
}
  
showTime();


HTML




<!-- index.html -->
<!DOCTYPE html>
<html>
  
<head>
    <title>Digital clock</title>
  
    <style>
  
        /* Link for Google font */
        @import url(
  
        body {
  
            /* Set background color of body */
            background-color: #afd275;
  
            /* Place item to center */
            align-items: center;
            display: flex;
            justify-content: center;
  
            /* Specify the vertical height */
            height: 100vh;
            overflow-y: hidden;
        }
  
        .clock {
            position: absolute;
  
            /* Put the clock content on 
            center of the screen */
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            color: white;
            font-size: 60px;
            font-family: Orbitron;
  
            /* Provide space between letter of clock */
            letter-spacing: 7px;
            align-items: center;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            margin-right: 4rem;
            height: 500px;
            width: 550px;
  
            /* Set the neumorphism effect to
             the body of clock */
            background-color: #afd275;
            box-shadow: inset 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
                inset -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div id="MyClockDisplay" 
            class="clock" onload="showTime()">
        </div>
    </div>
  
    <!-- Include JavaScript file -->
    <script src="index.js"></script>
</body>
  
</html>


Output: Click here to see live code output



Last Updated : 11 Sep, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads