Hey, learner today In this Post, we are going to Create an Analogue Clock using HTML, CSS, and JS. In the past post, we have created many projects one of them Realtime Date and Time using HTML CSS, and JS. Now it is time to create an Analog clock.
A real-time clock is a most useful element for any website where time is the primary concern. This clock can display world time or local time in the clock as per user needs. There are two types of clocks, analog and digital. This article helps you to build an Analogue clock using HTML, CSS, and javascript.
In this article, the real-time Analogue clock, with three hands will be used to show hours, minutes, and seconds. To get the current time we have to use the Date() object provided by the JavaScript. This will put the current seconds, minutes, and hours respectively. Now, we have got our hour, minute, and second, and we know that the clock rotates 360 degrees. So, we should convert the rotation of the hands of the clock into degrees. The degree calculation is based on the unary method.
Preview of the Analogue clock on Codepen
You might like this
- Creating a Heart using CSS | HTML & CSS
- Creating a Helicopter using CSS | HTML & CSS
- Realtime Date and Time using HTML CSS and JS
- Creating a teddy bear using CSS | HTML & CSS
- Login and signup Form Design using HTML and Pure CSS
Analogue Clock using HTML, CSS, and JS [Source code]
To create an Analogue Clock using HTML, CSS, and JS you have to create three file (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS file to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.
At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="clock.css">
<title>Analogue Clock</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="clock.js"></script>
<h1>Codingthai.com</h1>
</body>
</html>
After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.
body{
background-color: skyblue;
}
#canvas{
margin-left: 300px;
margin-top: 50px;
}
h1{
color: blue;
margin-left: 550px;
}
At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the Javascript file.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;
setInterval(drawClock, 1000); //run the drawClock function every second.
function drawClock(){
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius){
var grad;
ctx.beginPath();
ctx.arc(0,0,radius,0,2*Math.PI);
ctx.fillStyle = "White";
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0, radius*0.1,0,2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial"; //set font at 15% of radius
ctx.textBaseline = "middle"; //set text alignment to middle
ctx.textAlign = "center"; //set text alignment to center
for(num=1; num < 13; num++){ //calculate the print position for each number
ang = num *Math.PI /6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, 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(ctx, hour, radius*0.5, radius*0.07);
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width){
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me
5 thoughts on “Analogue Clock using HTML, CSS, and JS”