Random Quote Machine Project 12/2020

Code Feedback
1

Hello everyone,

I have created a random quote project by using react and i appreciate your feedback.
This is my first time publish my project to this forum :grinning:

Project Link Here: https://codepen.io/StanleyChan1/full/bGwwPwq

2

Hey @StanleyChan!
Welcome to the Forum!

Your project looks good

I have one suggestion,
You can add the background.

Thanks and Happy Coding!

3

Thank you so much !!

4

It looks good! I’m working through the React now. Looking forward to making my own quote machine.

5

Thank you for the comment so much !!

6

Just a few suggestions:

  • I would make the keyboard focus indicator outline a little more prominent on the button and Twitter link. They are there, which I applaud you for, they are just hard to see IMHO.
  • Speaking of the Twitter link, it needs to have some actual text associated with it so that screen readers know how to announce it. Inside of the <a> just add some text like “Tweet this quote” and then hide it visually from the user (but it will still be there for screen readers). If you don’t know how to do this see

https://gist.github.com/marcol/3979586

  • If I manually increase the text size then at some point the quote text runs off the top of the screen. If you don’t know how to increase the text size, using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to change the text size. I was able to fix this by removing just one CSS property. I’m not going to tell you which one because that would take all of the fun out of it. I’ll give you a hint though, to make your page responsive to changes in text size you should probably not use px when setting the height on elements that contain text.
  • If I’m being really picky here I would say that the color of the author text might not be dark enough to be technically accessible on that background.
  • By the way, nice use of the <blockquote>. Most of these I’ve seen just use a <div> or <p>. You could even take this a step further and use a <figure> around that with a <figcaption> for the author. Check out
7

Thank you for the comment so much !!