Skip to content
Submitted over 1 year ago

Responsive Countdown Timer App with React and TailwindCSS

react, tailwind-css
Dimitar Kazakov•270
@mitkokazakov
A solution to the Launch countdown timer challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Coder Suresh•870
    @coderSuresh

    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

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