My React Random Quote Machine

Code Feedback
1

Random Quote Machine
Please have a look and do throw your suggestions if you feel any error in logic do tell me .

2

A few suggestions:

  • Don’t put a min-width on the quote-box. Part of responsiveness is handling very narrow view ports. Instead of a min-width you should use CSS break points to rearrange the elements in your quote-box for very narrow widths. And I should never get a horizontal scroll bar for this page.
  • It’s OK to put a max width on the quote-box but I would make it much wider than 530px. For people who have the text size set very large they will only be able to see a few words on each line of the quote. Also, I suggest you use em units for the max-width.
  • You need to have link text for your social media links (e.g. the Facebook link text might say “Share this quote on Facebook”). You can visually hide the link text so it doesn’t actually show on the page. Without link text screen readers won’t know what to announce for each of those links.
  • I’d reconsider your use of underlining the author name. Historically, underlining is used to represent linked text so a lot of people will figure that is supposed to be a link when it isn’t. Perhaps italics instead?
1 Like
3

Hey Maria,

great work!

My ideas:

  • the height of the quote box jumps depending on the length of the quote; I think that a constant height would be better
1 Like
4

Thank you that’s actually make sense.
i was concentrating at REACT part and off course passing all those tests .anyways i will implement those ideas

EDITED
I did add few things . have a look
i first thought title is used for that purpose but you made me to do a quick research on google and yup it does n’t help So thank you again.

5

Thank you :slight_smile:

You are right now what is your suggestion because quotes can be very long

6

Hey Maria, it is looking better, now I think you need to concentrate on responsiveness.

  • You still have a width on the quote-box. When I narrow my browser less than 580px then I get a horizontal scroll bar. Don’t put a width on the quote-box. The only width related property you want on there is max-width, and I would use em units for that.
  • The responsiveness to text size changes is broken. 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 increase the text size. You will see that the content breaks out of the box rather quickly. This one is an easy fix: Don’t set a height on the quote-box.
7

Looking good now, great work!