Build analog clock using JavaScript canvas - Neumorphism clock UI design

This video will show you, how to create Live analog clock using JavaScript canvas element. I will also create beautiful neumorphism Analog Clock UI design. You can use this analog clock in web pages, mobile applications and for any other purposes. Thanks.

Tech used:

Other videos:

There are total 6 steps in this tutorial which includes creating new html file, adding HTML code to the page, adding CSS code, adding JavaScript code for clock hands, adding JavaScript code for clock numbers and finally importing all JavaScript files in header.

Thanks for sharing your valuable time and reading this description. I hope I was able to help you about create analog clock using JavaScript canvas - HTML CSS neumorphism clock UI design.

#javascriptclock #canvas #clockui #htmlcanvas #javascriptcanvas

[NitNet]

Sorry for editing issue: missing


function drawTime(context, radius) {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour = hour % 12;
hour = (hour * Math.PI) / 6 + (minute * Math.PI) / (6 * 60) + (second * Math.PI) / (360 * 60);
drawHand(context, hour, radius * 0.5, radius * 0.07);
minute = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60);
drawHand(context, minute, radius * 0.8, radius * 0.07);
second = (second * Math.PI) / 30;
drawHand(context, second, radius * 0.9, radius * 0.02);
}

[hosameldinmostafa]

thank you very much, that was a helpful. Greetings.

[georgereddy]

7:00 what is that jump? can't see the code above

[gher]

this is the skipped part

function drawTime(context, radius){
let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
hour = hour % 12;
hour = (hour * Math.PI) / 6 + (minute * Math.PI) / (6 * 60) + (second * Math.PI ) / (360*60);
drawHand(context, hour, radius * 0.5, radius * 0.07);
minute = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60);
drawHand(context, minute, radius * 0.8, radius * 0.07);
second = (second * Math.PI) / 30;
drawHand(context, second, radius * 0.9, radius * 0.02);
}