FCC : Random Quote Machine

Code Feedback
1

I just finished the Random Quote Machine challenge. This is the first project I have completed.

Looking for any feedback on this project.

Thanks in advance

https://codepen.io/unkovic_nemanja/full/LYVwpYz

3 Likes
2

I love it.
I am not able to comment on the javascript part, but I love what is in front of me.

There is only a single thing that I can comment on is the colors. Some of them are so bright, which is hurting the eyes, so maybe you can check your color palette.

Cheers,
Yigit

3

A few things:

  • I can’t see my keyboard focus on the page. I should be able to tell whether the focus is on the twitter icon or new quote button.
  • The new quote button should probably be an actual <button>. <a> generally points to places, like URLs or different sections on your page. <buttons> generally are for functionality (make something happen) such as generating a new quote. And since you don’t have an href on it, it is currently not in the tab order and thus I can’t use it from my keyboard anyway. Bottom line, change it to a <button>.
  • The twitter link should have text associated with it for screen readers. You could put some text inside the <a> and visually hide it or you could use aria-label.
    https://a11yproject.com/posts/how-to-hide-content/
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
  • Instead of using ‘px’ for the width of #quote-box try using ‘em’ instead. That way the box expands as the font size gets larger. If you change to ‘em’ then you might want to set a min-width on this as well, which can be in ‘px’.
  • Technically, you should have at least an h1 header on the page (for accessibility). If you didn’t want it to be shown you could visually hide it.
1 Like
4

Thanks for the feedback.

I have fixed these issues.

Thanks again.