Design a Digital Clock in Neumorphism Style using JavaScript

Read

Discuss

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:

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( 
'https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); 
  
        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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 11 Sep, 2023

Snake Like Effect using CSS and JavaScript

Difference between Web Role and Worker Role in Node.js