This is a solution to the Launch countdown timer challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
-
See hover states for all interactive elements on the page
-
See a live countdown timer that ticks down every second (start the count at 14 days)
-
Bonus: When a number changes, make the card flip from the middle
- Solution URL: solution URL
- Live Site URL: live site URL
- ReactJS
- Vite
I recap the React Use State.
To see how you can add code snippets, see below:
<main className='mainContainer'>
<h1 id='header'>We're launching soon</h1>
<Counter timeObject={timeObject} />
</main>
<Footer/>
background-color: hsl(234, 17%, 12%);
font-size: 14px;
font-weight: 700;
color: white;
text-transform: uppercase;
font-family: "Red Hat Text", sans-serif;
font-optical-sizing: auto;
font-style: normal;
const [totalSecond, setTotalSecond] = useState(1209600);
const [timeObject, setTimeObject] = useState({
day:parseInt(totalSecond/86400),
hour:parseInt(totalSecond%86400/3600),
min:parseInt(((totalSecond%86400)%3600)/60),
seconds:parseInt(((totalSecond%86400)%3600)%60)});
if(totalSecond!==0){
setTimeout(()=>{
setTotalSecond(totalSecond-1);
setTimeObject({
day:parseInt(totalSecond/86400),
hour:parseInt(totalSecond%86400/3600),
min:parseInt(((totalSecond%86400)%3600)/60),
seconds:parseInt(((totalSecond%86400)%3600)%60)}
);
},1000);
}
Tailwind and other CSS framework
- Microverse - This helped me with the Full Stack Development Program.
- Website - Graciano Henrique Portfolio
- Frontend Mentor - @Graciano1997
- Twitter - @GracianoSoft
- Microverse
- FrontEnd Mentor