How to make beautiful Clock in JavaScript
![How to make beautiful Clock in JavaScript](https://www.kingofjavascript.com/uploads/posts/thumbnails/how_to_make_beautiful_clock_in_javascript_1280x720.jpg)
February 12, 2023
Learn How to Build a Clock using pure HTML, CSS and JavaScript
today I'm going to teach you how to build a beautiful analog clock using HTML, CSS and JavaScript.
Important Formula:
We can get the time using JavaScript. And the hands of the clock rotates in degrees.
so we have to convert the time into degrees for each hands(hour hand, minute hand, seconds hand) of the clock.
(i) Convert hours to degrees:
The hand of an hour clock rotates 360 degrees(1 round) for 12 hours.
12 hours = 360 degree
So how many degrees will rotate in 1 hours?hour = 360/12 degree
hour = 30 degree
how many degrees will rotate for h hours.
The hour hand also depends on the minute hand so we need to time that as well.
we already calculated hour = 30 degree
for hour hand.
60 min = 30 degree
1 min = 30/60 => (1/2) degree
How many degrees will rotate for m minutes.
min = (1/2)*m => (m/2)
Hour Rotation = hours + minutes
(ii) Convert Minutes to degrees:
The hand of an minutes clock rotates 360 degrees(1 round) for 60 minutes.
60 min = 360 degree
1 min = 360/60 => 6 degree
how many degrees will rotate for m minutes.
min = 6*m (m for minutes)
(iii) Convert Seconds to degrees:
The hand of an seconds clock rotates 360 degrees(1 round) for 60 seconds.
60 seconds = 360 degree
1 seconds = 360/60 => 6 degree
how many degrees will rotate for s seconds.
seconds = 6*s
Step 1) Add HTML:
Example
<div class="container"> <div class="clock"> <div class="hour" id="hour"></div> <div class="minute" id="minute"></div> <div class="second" id="second"></div> <div class="numbers"> <div class="number number1"><span>1</span></div> <div class="number number2"><span>2</span></div> <div class="number number3"><span>3</span></div> <div class="number number4"><span>4</span></div> <div class="number number5"><span>5</span></div> <div class="number number6"><span>6</span></div> <div class="number number7"><span>7</span></div> <div class="number number8"><span>8</span></div> <div class="number number9"><span>9</span></div> <div class="number number10"><span>10</span></div> <div class="number number11"><span>11</span></div> <div class="number number12"><span>12</span></div> </div> </div> </div>
Step 2) Add CSS:
Example
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; } *{ box-sizing: border-box; } body{ font-family: 'Anton', sans-serif; font-weight: 500; } .container{ background: #4f8dff; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } .clock{ height: 70vmin; width: 70vmin; background: #001926; border-radius: 50%; position: relative; border: 30px solid #0c2633; display: flex; align-items: center; justify-content: center; } .numbers{ position: absolute; top: 20px; bottom: 20px; right: 20px; left: 20px; display: flex; justify-content: center; } .number span{ position: absolute; } .number{ position: absolute; font-size: 2.5rem; color: #fff; height: 100%; width: 100%; display: flex; justify-content: center; } .number1{ transform: rotate(30deg); } .number2{ transform: rotate(60deg); } .number3{ transform: rotate(90deg); } .number4{ transform: rotate(120deg); } .number5{ transform: rotate(150deg); } .number6{ transform: rotate(180deg); } .number7{ transform: rotate(210deg); } .number8{ transform: rotate(240deg); } .number9{ transform: rotate(270deg); } .number10{ transform: rotate(300deg); } .number11{ transform: rotate(330deg); } .number1 span{ transform: rotate(-30deg); } .number2 span{ transform: rotate(-60deg); } .number3 span{ transform: rotate(-90deg); } .number4 span{ transform: rotate(-120deg); } .number5 span{ transform: rotate(-150deg); } .number6 span{ transform: rotate(-180deg); } .number7 span{ transform: rotate(-210deg); } .number8 span{ transform: rotate(-240deg); } .number9 span{ transform: rotate(-270deg); } .number10 span{ transform: rotate(-300deg); } .number11 span{ transform: rotate(-330deg); } .clock::before{ content: ''; position: absolute; height: 10px; width: 10px; border: 7px solid #fff; border-radius: 50%; z-index: 50; background: #001926; } .hour,.minute,.second{ position: absolute; display: flex; justify-content: center; transform-origin: bottom; } .hour{ top: 24%; height: 26%; width: 10px; background: #ff105e; border-radius: 5px 5px 0 0; transform: rotate(60deg); } .minute{ top: 20%; height: 30%; width: 6px; background: #fff; border-radius: 5px 5px 0 0; transform: rotate(180deg); } .second{ top: 16%; height: 34%; width: 2px; background: #236aee; border-radius: 5px 5px 0 0; transform: rotate(270deg); z-index: 51; } .second::before{ content: ''; position: absolute; width: 4px; height: 25px; background: #236aee; display: flex; justify-content: center; align-items: center; bottom: -25px; } @media (max-width:600px) { .number{ font-size: 1.5rem; } .clock{ border: 20px solid #0c2633; } }
Step 3) Add JavaScript:
Example
const hourHand = document.querySelector("#hour"); const minuteHand = document.querySelector("#minute"); const secondHand = document.querySelector("#second"); setInterval(setClock, 1000); function setClock() { //getting time const currentDate = new Date(); const hours = currentDate.getHours(); const minutes = currentDate.getMinutes(); const seconds = currentDate.getSeconds(); //convert time into degree const h_rotation = 30 * hours + minutes / 2; const m_rotation = 6 * minutes; const s_rotation = 6 * seconds; //apply degree on clock hands secondHand.style.transform = `rotate(${s_rotation}deg)`; hourHand.style.transform = `rotate(${h_rotation}deg)`; minuteHand.style.transform = `rotate(${m_rotation}deg)`; } setClock()