Clock Timer with JavaScript

This a clock that will work with the time you added in the JavaScript. It is easy to use and easy to understand. 


Coded By: Bousahla Mounir

CodePen: https://codepen.io/bousahla-mounir/pen/YzNBqNr


Html:

<div class="clock"></div>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/radialIndicator/1.1.0/radialIndicator.js"></script>      


Css:

body {
  font-family: system-ui;
  padding: 5%;
}


JS:

const clock = radialIndicator(".clock", {
                        radius: 150,
                        barWidth: 30,
                        barColor: '#f44336',
                        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);

Post a Comment

Previous Post Next Post