Random Quote Machine Generator App Feedback

[mailmeatshraddha]

Hi Everyone,

I have completed my first project of the Front End Development Libraries section. I made a React App with the following components:

I used the following API to fetch the quotes from:
Quotable API

Codepen Link:
Random Quote Generator

Any suggestions on the design and approach are welcomed.

Thanks.

[jwilkins.oboe]

Hi @mailmeatshraddha !

I think it looks good.

Keep up the good work!

[bbsmooth]

Hi @mailmeatshraddha, congratulations on completing your first project. Overall, this is very nicely done, but I do have a few suggestions:

• Some of the color combinations do not have enough contrast to be accessible (the light green and light blue especially). There are a variety of tools you can use to check for accessible color contrast. One of my favorites is the WebAIM Contrast Checker.

• I would highly recommend you have an <h1> (most likely it would be the “Random Quotes” heading). Also, change that <div id="main"> to <main id="main">.

• If I’m being really picky, probably suggest that you put the credit line in a <footer> and place the footer outside of the <main>.

• The Twitter icon link needs text associated with it (something like “Tweet this quote”). The easiest way to do this is to add the text inside the <a> and then visually hide the text.

• This is very picky, but there are minor layout issues at certain browser widths. For instance, at certain widths the “New Quote” button goes from a single row to two rows. Also, at very narrow widths the tweet and quote button no longer line up and the tweet button is higher than the quote button.

• Excellent use of rem units for the max width. Too many people use px here and then it doesn’t scale nicely as you zoom in.

• You might think about moving the box down a little from the top of the view port. I don’t think it has to be vertically centered, but I think it would look a little nicer with some white space above it.

• You have a nice box shadow focus outline for the quote button. I would recommend you do the same thing for the tweet link. Also, for some color combinations, I think you need to change the focus color since it doesn’t have enough contrast from the button color (again, particularly for the green and blue colors).

[mailmeatshraddha]

Thank you @jwilkins.oboe .

[mailmeatshraddha]

@bbsmooth Thank you for the honest reviews. I really appreciate the points you have brought forward. I will look to improve on them. Thank you so much!!