Analogue Clock using HTML, CSS, and JS

5
186

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.

Analogue Clock using HTML, CSS, and JS

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

Codepen Link

You might like this

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

Previous articleChat System Project using PHP with Source Code
Next articleFixed expanding card transitions Using HTML, CSS, and JS

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here