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
Top comments (0)