Digital Clock with React

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");

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]);

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>
    )
}

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%);

  }

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

you can check my speed code in my Youtube Channel

Day5of #100DaysOfCode.