Judge my 25+5 clock app

Code Feedback
1

this is the first ever fcc FE lib challenge i’ve worked all by my self without the urge to watch YT tutorials or ask AI. although it took me approximately a weeeeeek to finish this challenge, my motivation didn’t fade away after just 1-2 days unlike the previous challenges where my mood kept switching on/off. moreover, at the end of this journey, i feel like my problem solving skill has actually improved a lot. anyways, feel free to roast me! (the more critical the better). ty for your time! :slight_smile:

https://codepen.io/siamese6401/pen/RNPWEoo

2

Wow it is so nice!!! :wink:

1 Like
3

Welcome to the forum @wigabsent

Since you are asking:

  • best practices are to have only one h1 element per page. Consider using the h2 element or another element with a specific font size for the loading text
  • the colon between the minutes and seconds look misaligned
  • the timer font looks great, however numbers like, 7, 3, and 1 change the spacing
  • for accessibility consider contrast between the background colour and the button colour
  • wrap attribute values in curly braces
   <ControllerTemplate
      id="session"
      title={"Session"}
      duration={pomodoro}
      event={event}
   />
  • the reset button should look more like a button than text, maybe style it like the start/stop button
  • I see the audio variable is declare multiple times, maybe tidy up the code by declaring it only once

Happy coding

1 Like
4

thanks for your sincere comment! i agree to most of your points. regarding the timer font, the font behaves that way, which i have no control over. i’ve tried to look for a monospaced font with a similar design but there was no luck :frowning: