25 + 5 clock Feedback

Hey Guys would be nice to hear something from you. :slight_smile:

Here’s the link to my project:

Is it me, or does your clock not have the same definition of how long a second lasts that I do :slight_smile:

Just a few issues that need to be addressed:

  • The things that act like buttons on your page should be coded as <button> instead of <a>. I know it doesn’t make much difference if you are using a mouse, but for keyboard users and screen reader users it makes a big difference. The general rule is that buttons make things happen on the page while links take you somewhere. Also, since none of those links have an href attribute they will not allow keyboard focus, which makes it impossible to use the keyboard to control your clock.

  • Your page needs to be responsive. Notice that as you narrow the browser window you get a horizontal scroll bar.

1 Like

HI @kzowada !

Congrats on finishing the 25 +5 clock! :grinning:
That’s a tricky project.

Just a few things from me

Now that you have some practice working with classes, you should start building your future react projects with hooks since that is the modern way to write react.
There are plenty of great courses where you can learn hooks and you will see that it is a cleaner way to write react.

Also, for future react projects you will want to use other platforms like codesandbox that support multiple files.
It will make your app cleaner if you have an app.js with the imported child components inside of it instead of one giant js file IMO :grinning:

Lastly, I would be careful about deeply nested if statements.
I am referring to your setTime() function.
Sometimes, you need nested if statements and that is totally fine.
You just don’t want them to get to deep or complicated to the point where it is not fun to read for other developers IMO :grinning:

Hope that helps!

Ups I forgot to to change the 2nd argument of the setInterval method back to 1000. I kept it lower because I didn’t want to always wait whole minutes in order to check if my logic is doing the right thing. Okay you’re right I should start using buttons. Im not even really sure why I started using a-tags for my buttons. I will add on the responisveness later on. Thanks for your feedback. :slight_smile:

Yes the setTime() method is a mess to be honest. I had to rewrite the method like 4-5 times because I would get myself lost between all those conditionals.
Could you maybe provide a link where the time keeping is done in more elegant way ?
Does codesandbox also have a test suite like in code pen ?
And any recommendations which resource of information I should consider to learn about react Hooks ?

Now that you have finished the project you could look at how other users have chosen to write their time functions in the #project-feedback section.
You can also look at the freecodecamp example code since they also use classes.

You can add the script tag to the html file in codesandbox.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Kent’s course is really good

Also, freeCodeCamp just released a new react course

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.