DEV Community

Cover image for Digital Clock with React
vasanthkumar
vasanthkumar

Posted on • Edited on

Digital Clock with React

#javascript #react #clock #digital

After 5days into ReactJs, I build a simple Digital clock.

font used: digital-7

Through this project I learned how to use useEffect() and also setInterval()

I did use four different useState() for hours , minutes , seconds and date.

 const [hours,setHours]=useState("00"); const [minutes,setMinutes]=useState("00"); const [seconds,setSeconds]=useState("00"); const [date,setDate]=useState("date");
Enter fullscreen mode Exit fullscreen mode

we can get the current Date in javascript by

new Date()

so I made let d=new Date() and extracted the related content and set the all varibles.

 useEffect( ()=>{ const intervalId= setInterval(()=>{ let d=new Date(); var h=d.getHours().toString(); var m=d.getMinutes().toString(); var s=d.getSeconds().toString(); var z=d.getDate().toString()+" / " +(d.getMonth()+1).toString()+" / " +d.getFullYear(); setDate(z); setHours(h); setMinutes(m); setSeconds(s); return () => clearInterval(intervalId); },1000); },[seconds,minutes,hours,date]);
Enter fullscreen mode Exit fullscreen mode

I thought I had completed but the hours were in 24hrs format , so changed it to 12 hours by h=(h%12)||12;
and also padded zeros at the start using padstart(2,'0');

and returned some JSX , so now complete code in App.js looks like

 import React ,{useState,useEffect}from 'react'; import './App.css' export default function App() { const [hours,setHours]=useState("00"); const [minutes,setMinutes]=useState("00"); const [seconds,setSeconds]=useState("00"); const [date,setDate]=useState("date"); useEffect( ()=>{ const intervalId= setInterval(()=>{ let d=new Date(); var h=d.getHours(); var m=d.getMinutes().toString(); var s=d.getSeconds().toString(); h=(h%12)||12; h=h.toString(); var z=d.getDate().toString().padStart(2,'0')+" / " +(d.getMonth()+1).toString().padStart(2,'0')+" / "+d.getFullYear(); setDate(z); setHours(h.padStart(2,'0')); setMinutes(m.padStart(2,'0')); setSeconds(s.padStart(2,'0')); return () => clearInterval(intervalId); },1000); },[seconds,minutes,hours,date]); return ( <div> <h1>Digital Clock</h1>  <hr/> <h1 className="date">{date}</h1>  <h1 className="glow">{hours} :{minutes} :{seconds}</h1>  </div>  ) }
Enter fullscreen mode Exit fullscreen mode

now lets go to styling : App.css

imported digital font with black background , green digital clock and today's date

 @font-face{ font-family:'digital-7'; src: local('digital-7'),url('./fonts/digital-7.ttf')format('truetype'); } body{ background-color: black; } h1 { font-family:'digital-7'; font-size: 80px; color: #32cd32; text-align: center; } .date{ letter-spacing: 4px; position: fixed; top: 80%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); } .glow { letter-spacing: 4px; position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); }
Enter fullscreen mode Exit fullscreen mode

so the final output looks like the thumbnail of this post.

you can check my speed code in my Youtube Channel

Day5of #100DaysOfCode.

Top comments (0)