Animated clock using React JS Hooks

Let’s build an animated clock using the React Hooks.

HTML

Create an HTML for the clock pointer circle, second, minute, and hour handles

CSS

body {
background-color: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.clock-container {
display: flex;
align-items: center;
justify-content: center;
background-image: url("clock.png");
}
.clock-container .clock {
background: url("https://raw.githubusercontent.com/ganeshbabuhc/day1_clock/master/clock.png");
background-size: 100% 100%;
height: 150px;
width: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #1e1e1e;
box-shadow: 0px 0px 10px 10px rgba(0, 224, 255, 0.2);
}
.clock .hor,
.clock .min,
.clock .sec {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.clock .hor .hr {
background-color: #3d6cb9;
position: absolute;
height: 30px;
width: 2px;
bottom: 0px;
z-index: 8;
border-radius: 2px;
}
.clock .min .mn {
background-color: #00d1ff;
position: absolute;
height: 45px;
width: 2px;
bottom: 0px;
z-index: 9;
border-radius: 2px;
}
.clock .sec .sc {
background-color: #00fff0;
position: absolute;
height: 60px;
width: 2px;
bottom: -15px;
z-index: 10;
border-radius: 2px;
}

ReactJS

Now create useEffect hook that will refresh the timer for every 1 second(ideal for the clock to refresh every 1 second) using the setInterval timer function. useRef is used to create references for the second, minute and hour handles that we need to rotate based on the time.

Demo

https://codesandbox.io/s/funny-tdd-kpmvq