Feedback to my Random Quote Machine built with React

[Tolikowski]

Hi everyone,

I would like to have some feedback for my Random Quote Generator:

https://codepen.io/Tolikowski/pen/yLgXwJQ

Its the first time I built something with React.js apart from the challenges, I guess.

The only thing I struggle with is aligning the container in the middle of the viewport.
Has anyone any idea how that works?

Thanks in advance to everyone kind enough reviewing this project!

[Sylvant]

your app looks nice. Im having some delay to see background picture rendered after click to fetch new quote but this might be my connection.
Best thing i would figure out to place your container in the middle(we speak about height i suppose) is to set its position to relative and put top: 30vh . This gives the desired effect in most conditions, but i cant vouch that it is perfect and without misfires.

EDIT: actually i better solution i found from w3school:

  position: relative;
  top: 50%;
  transform: translate(0, -50%);

[bbsmooth]

Overall, this is very nicely done. I do have a few suggestions for improvements:

• The font color of the author content is way too light upon the white background to be accessible. Use the WebAIM color contrast checker to make sure your text is accessible.
• I would say that this is definitely a block quote and thus you should probably use the <blockquote> element. Take a look at how the MDN Web Docs markup a block quote.
• Best practices would be to wrap everything in a <main> element.
• You’ll need to add some text to those buttons. Right now the screen reader just announces “button” since there is no text associated with them and thus a blind person will not know what those buttons are for. The easiest way to do this is to add text inside the <button> and visually hide it.
• Think about using em units instead of px for the max-width on the container, this way it will be responsive to changes in text size. You can add some side padding to prevent it from expanding all the way to the edge of the view port.
• Those background images do take quite a long time to download and display. I would suggest you store at least one locally and use it and its associated quote as the first quote to display, and then come up with a method for prefetching the next image before the user clicks the reload button so that it is ready to go when clicked. Basically, always be one step ahead of the user so that the quote/image is ready to go when the user reloads.

[Roma]

Welcome to the forums @Tolikowski. Your RQG looks good. The only thing I have to add is;

• The test script, with all tests passing, should be included when you submit your projects.
  • Your page passes 1/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

[Tolikowski]

Thank you for taking your to write this comprehensive feedback - much appreciated!
The only thing I don’t quite know how to implement is the preloading of images. I used a link that generates random images like this: https://source.unsplash.com/1600x900/?nature,water
But even without this link I wouldn’t really understand how to do that for all quotes
I think I’ll need to read up on that.

Again, thank you!

[Tolikowski]

Hi! I’m actually a little bit of a forum lurker, but decided that I need feedback to refine my skills

But to get back to your feedback: How important are these tests for the certs? In my past projects I made sure to fulfill all the points, but I kind of decided to go freestyle on this project. In the end this generator does what it is supposed to do, isn’t it? I’m just asking myself if it is necessary to follow those user stories precisely or if it’s enough that the app has the necessary functionality?

[Roma]

@Tolikowski

How important are these tests for the certs?

Let’s say the certs are a job you’re going to get paid for and the customer tests are the way to verify that you’ve fulfilled the necessary requirements to get paid.
If the tests do not pass successfully you will not get paid. The customer isn’t going to take it at face value that all requirements have been met.

Now if you want to do one for the certification where all the user stories are met and then do another that has more bling to it, something to showcase to a potential employer that you’d want to have in your portfolio and it doesn’t meet all the user stories you are free to do that.