Launch Countdown Timer using Flexbox, Styled components, React, TS

Community feedback

• 

  P

  Kamila Kłosek•140

  @KamQuossPosted almost 2 years ago

  Hi Claire, nice work :) I've noticed that numbers aren't changing every second, but change is made every 2-4 seconds. Have You tried to count time with Date object and interval. Chcecking current time and calulating subtraction from "zero" every second (interval) could be more accurate. Hope this apprach would be interesting for You.

  Marked as helpful

  0

  ---

  

  Claire Karsenti•130

  @ClaireKarsentiPosted almost 2 years ago

  @KamQuoss

  Oops! Thanks for flagging this 👍 Considering this, I've just updated my code with a new useEffect for my useTimer hook:

  useEffect(() => {
      const initialInterval: any = setInterval(() => {
        setTimeSpan((prevCount) => prevCount - SECOND);
      }, SECOND);
      if (!isStarted) {
        clearInterval(initialInterval);
      }
      if (timeSpan === 0) {
        setTimeIsUp(true);
        clearInterval(initialInterval);
        return;
      }
      return () => clearInterval(initialInterval);
    }, [timeSpan, isStarted, interval]);
  

  Thank you 😊

  0
• 

  Divine Obeten•2,415

  @Deevyn9Posted almost 2 years ago

  Hi Claire, congrats on completing this project, it looks really great, I like your innovation to add the start and reset buttons. However, I noticed that from around 360px, the cards begin to overflow horizontally. look into making it responsive for screens of smaller width.

  I hope you find this helpful and you're able to make it more responsive.

  Happy Coding! 🎉

  Marked as helpful

  0

  ---

  

  Claire Karsenti•130

  @ClaireKarsentiPosted almost 2 years ago

  @Deevyn9

  Thank you! I've just updated my code considering your feedback 😊

  I need definitely to work more on responsive design on my next project 🚀

  1

  

  Divine Obeten•2,415

  @Deevyn9Posted almost 2 years ago

  @ClaireKarsenti glad i could help!

  0

  

  Divine Obeten•2,415

  @Deevyn9Posted almost 2 years ago

  @ClaireKarsenti glad i could help!

  0