How To make a Clock Using radialIndicator.js

byCodingFlicks -August 05, 2021

0

JavaScript digital clock is a tiny webpage widget that shows the current time and updates itself every second. In today's blog post, we will share a simple JavaScript snippet about a digital clock widget created using HTML, CSS and a jQuery plugin called radialIndicator js. The entire process of creating it is shown in the video tutorial below. Please watch it before collecting the source code.

Video Tutorial:

Hope you enjoyed the above video tutorial on how to create a clock using RadialIndicator JS. We all know that almost everything we do depends on time. Hence comes the importance of clock and that is why it is one of the most universal and useful elements or widgets in any system or interface. We rely on time to organize work, meetings, deadlines, etc. These clock widgets on devices are useful for users in various ways. Some of these are time awareness, work scheduling, productivity, system coordination, aesthetics and familiarity, global and digital interaction, etc. Nowadays, almost all modern devices have clock widgets on their systems for the user. Some of the devices are smartphones, tablets, laptops, desktop computers, smartwatches, smart TVs, digital alarm clocks, microwave ovens, ovens or stoves, car dashboards or infotainment systems, smart speakers, smart home displays, game consoles, fitness trackers, POS systems, ATM machines, digital cameras, aircraft entertainment screens, office printers and copiers, IoT devices and so on.

Now, the code implementation part is easy. We need to take the div with an id of circle-clock. Next, we adjusted the div and brought the div to the center of the viewport using absolute position, top-left value and CSS transform property. Next, we downloaded the plugin as shown in the video above. After that, We extracted the zip file. From there, we took the 'radialIndicator.min.js' and 'angular.radialIndicator.js' files and added them to the HTML file. We also added the latest jQuery file. Later, we initiated the plugin with the code provided on their website. We also changed the values like 'bar width', 'bar color' etc. there so that we can give the look we want. You can also change these values as per your requirement.

You May Also Like:

Digital Clock Widget Using radialIndicator js [ Source Code ]:

To create this Digital Clock Widget using JavaScript, we have to create an HTML file and a CSS file. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if it working or not. You can also download the code from the download button below the blog post.

ADD HTML:

<!doctype html>
<html lang="en">
<!-- codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>How To make a Clock Using radialIndicator.js</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="circle-clock"></div>



    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/radialIndicator.min.js"></script>
    <script src="js/angular.radialIndicator.js"></script>
    <script>
        const clock = radialIndicator("#circle-clock", {
        radius: 250, /*change*/
        barWidth: 20, /*change*/
        barColor: 'darkorange', /*change*/
        minValue: 0,
        maxValue: 60,
        fontWeight: 'normal',
        roundCorner: true,
        format: function (value) {
            const date = new Date();
            return date.getHours() + ':' + date.getMinutes();
        }
    });

    setInterval(() => {
    clock.value(new Date().getSeconds() + 1);
    }, 1000);
    </script>
</body>
</html>

ADD CSS:

body{
    background: #000; 
}
#circle-clock{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

We hope you have collected the source code. For more like this, you have to go the homepage of our website and click the load more button there. Thank you for visiting the website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.