Create analog clock using react
iv’e created this component after being in a professional front end interview in a startup company.
the use case was:
1. create a component that displays both an analog and digital clock.
2. the analog clock should display hours, minutes and seconds.
3. the component should be able to display different time zones. e.g the first clock will display NY time and the second will display London time.
i was given 90 minutes to finish it.
let’s get to work!
first thing first — create the component file (clock.jsx) and create the HTML structure:
as you can see the component has a title, the analog clock and the digital clock. the analog clock contains 3 dials — hours, minutes and seconds.
let’s add some CSS to make it look more like a real clock :). I will use sass for the convinience.
let’s create a file called clock.scss ( you can use regular css file if you like ) and put in the following code:
I’ll explain what i did here:
1. the clock body — he was created using a box 100px width and height with a radius (border-radius property) of 50% which makes it a circle.
2. each dial is made out of a box that has the size of the circle radius which is in our case 50px.
3. we give only one side of each dial box a border — i used black for the hours, red for the minutes and green for the seconds.
4. now I positioned the dials bottom-left corner in the center of to clock body using left: 50% property.
5. iv’e added to all dials the css property: transform-origin: bottom left; so each dial will have a rotation base from the bottom-left corner of the dial box.
6. I made the hours dial shorter and thicker like in the real world clocks.
now let’s make it move like a clock
we need a function that creates the time that the component will use to display the analog and digital clock. i’ll call it handleDate. it will accept a prop call datediff that enables the component to display the currnet time in each instance of the component. for example if the current time in london is 12:00 — in new york the time is 08:00.
the rest is just create a simple Date object and extract from it the current hours, minutes and seconds and store it in the component’s state.
to make this function run each second i’ll add setInterval when the component is mounted to the dom. and don’t forget to clear the interval when the component is unmounted.
in the render function i added a style for each dial with rotaion css property. for the seconds i used transform: rotate(${seconds * 6}deg) which takes the seconds (let’s say current second is 15) and multiply it by 6 to get the amount of degrees i need to rotate the dial. in our case it’s 90 degrees. same goes for the minutes. for the hours i multiply it by 30 because there are only 12 hours in our clock…
last thing — for the digital clock display i’ll add a “0” if the number is less than 10.
this is how i did it:
finally in our app we can import the component and and use it like this:
tha’s all folks.
