This code is a digital clock implementation using React JS. It provides a clock interface that displays the current time with hours, minutes, and seconds. The code uses React components and hooks to manage the clock’s functionality and rendering. It dynamically updates the clock every second by utilizing React useEffect and useState hooks. The code is helpful for anyone who wants to incorporate a digital clock feature into their React JS application.
How to Create a Digital Clock in React JS
1. First, load the clock’s fonts by adding the following CDN link into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
2. Create a div element with an id “root” in which the clock will be rendered.
<div id="root"></div>
3. Style the clock widget using the following CSS styles:
body{
background-color: #1e1e1e !important;
margin: 0px;
overflow: hidden;
padding: 0px;
}
body input, body h1, body a, body span {
color: #5a5a5a;
font-family: "Rubik", sans-serif;
font-weight: 400;
margin: 0px;
padding: 0px;
}
#app {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
#app #timer {
background: linear-gradient(to bottom right, #0263e1, #eb1836);
border-radius: 22px;
}
#app #timer #timer-text {
align-items: center;
background-color: #1e1e1e;
border-radius: 20px;
display: flex;
margin: 4px;
padding: 0px 20px;
}
#app #timer #timer-text .timer-char {
height: 150px;
position: relative;
text-align: center;
width: 80px;
}
#app #timer #timer-text .timer-char.colon {
color: white;
font-size: 8em;
line-height: 150px;
}
#app #timer #timer-text .timer-char .timer-char-slider {
display: flex;
flex-direction: column;
left: 0px;
position: absolute;
top: 0px;
transition: top 200ms;
width: 80px;
}
#app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option {
color: white;
font-size: 4em;
height: 150px;
line-height: 150px;
opacity: 0.05;
transition: opacity 400ms, font-size 400ms;
width: 80px;
}
#app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option.active {
font-size: 8em;
opacity: 1;
}
@media (max-width: 800px) {
#app #timer {
border-radius: 16px;
}
#app #timer #timer-text {
border-radius: 14px;
margin: 4px;
padding: 0px 12px;
}
#app #timer #timer-text .timer-char {
height: 80px;
width: 40px;
}
#app #timer #timer-text .timer-char.colon {
font-size: 4em;
line-height: 80px;
}
#app #timer #timer-text .timer-char .timer-char-slider {
width: 40px;
}
#app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option {
font-size: 2em;
height: 80px;
line-height: 80px;
width: 40px;
}
#app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option.active {
font-size: 4em;
}
}
@media (max-width: 400px) {
#app #timer {
border-radius: 8px;
}
#app #timer #timer-text {
border-radius: 6px;
margin: 2px;
padding: 0px 10px;
}
#app #timer #timer-text .timer-char {
height: 40px;
width: 20px;
}
#app #timer #timer-text .timer-char.colon {
font-size: 2em;
line-height: 40px;
}
#app #timer #timer-text .timer-char .timer-char-slider {
width: 20px;
}
#app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option {
font-size: 1.25em;
height: 40px;
line-height: 40px;
width: 20px;
}
#app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option.active {
font-size: 2em;
}
}
4. Now, load the React JS and necessary dependencies by adding the following CDN links just before closing the body element.
<script src='https://unpkg.com/react@17/umd/react.development.js'></script> <script src='https://unpkg.com/react-dom@17/umd/react-dom.development.js'></script> <script src='https://unpkg.com/browse/@types/react@16.4.14/index.d.ts'></script> <script src='https://unpkg.com/browse/@types/react-dom@17.0.2/index.d.ts'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.1/index.min.js'></script> <script src='https://codepen.io/Hyperplexed/pen/xxYJYjM/54407644e24173ad6019b766443bf2a6.js'></script>
5. Finally, add the following React JS code to your project to activate the clock functionality.
"use strict";
const TimerChar = (props) => {
const ref = React.useRef(null);
const colon = props.char === ":";
if (colon) {
return (React.createElement("h1", { className: "timer-char colon" }, ":"));
}
const number = parseInt(props.char);
const getCharSlider = () => {
let options = [];
for (let i = 0; i <= 9; i++) {
const classes = classNames("timer-char-slider-option", {
active: number === i
});
options.push(React.createElement("span", { key: i, className: classes }, i));
}
const height = ref.current ? ref.current.offsetHeight : 0, top = `${number * height * -1}px`;
return (React.createElement("div", { className: "timer-char-slider", style: { top } }, options));
};
return (React.createElement("div", { ref: ref, className: "timer-char number" }, getCharSlider()));
};
const Timer = () => {
const [date, setDateTo] = React.useState(new Date());
React.useEffect(() => {
const interval = setInterval(() => {
const update = new Date();
if (update.getSeconds() !== date.getSeconds()) {
setDateTo(update);
}
}, 100);
return () => {
clearInterval(interval);
};
}, [date]);
const formatSegment = (segment) => {
return segment < 10 ? `0${segment}` : segment;
};
const getHours = (hours) => {
return hours % 12 === 0 ? 12 : hours % 12;
};
const getTime = () => {
const hours = getHours(date.getHours()), minutes = date.getMinutes(), seconds = date.getSeconds();
return `${formatSegment(hours)}:${formatSegment(minutes)}:${formatSegment(seconds)}`;
};
const getChars = () => {
return getTime().split("").map((char, index) => (React.createElement(TimerChar, { key: index, char: char })));
};
return (React.createElement("div", { id: "timer" },
React.createElement("div", { id: "timer-text" }, getChars())));
};
const App = () => {
return (React.createElement("div", { id: "app" },
React.createElement(Timer, null)));
};
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
That’s all! hopefully, you have successfully created a digital clock in React JS. If you have any questions or suggestions, feel free to comment below.
