Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Countdown Timer App with React and TailwindCSS

@mitkokazakov

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I decided to use React for this solution. But a couple of issues occurred. In the initial load of the page in the boxes for the numbers is displayed NaN. I cope with it with && operator but then another issue pop in. When the seconds countdown it reaches 2 and never reaches 1 and 0. I think it may be from the re-rendering but I am not sure. I am open for any advices.

Community feedback

@coderSuresh

Posted

Hey there, nice work.

The NaN you are seeing on the initial load for a second is because you are setting n state with the value of timeValue when it is undefined.

You can simply check if timeValue is defined and set the n state accordingly.

For example: You can add following line below line number 28 of your CounterCard.jsx

if (!timeValue) return

If you do this, you see noting for a second (for which you were previously seeing NaN) and then the timer starts.

Marked as helpful

0

@mitkokazakov

Posted

@coderSuresh Yeah. It solved the issue when NaN is shown. But now there is another problem. When countdown timer reaches 2 seconds - the 1 and 0 is not shown but the 59 is shown instead.

0

@coderSuresh

Posted

@mitkokazakov Yeah I couldn't solve that issue. I saw that you are using n+1 I don't know why.

When I use n instead of n+1, I see 3 2 1 [freezes for a second] and then 59 58 57...

I couldn't figure out what is causing the issue.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord