Digital Clock with React
Tags: javascript, react, clock, digital
Published: 2021-01-01 12:23:22

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

font used: [digital-7](https://www.1001fonts.com/digital-7-font.html)

Through this project I learned how to use <b> useEffect() </b> and also <b> setInterval() </b>


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

```javascript
    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.

 ```javascript
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
```javascript
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

```css
@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.
<img src="https://dev-to-uploads.s3.amazonaws.com/i/r7hxqrdza91iv3ksda7o.png"/>
you can check my speed code in [my Youtube Channel](https://www.youtube.com/channel/UCUEuQY2PwZDar70aly6ZNrQ)
#####[Day5](https://youtu.be/yIdhaxRUwAM)of #100DaysOfCode.