Random Quote Machine - Feedback Please 😃

Code Feedback
1

Hi campers,

I would like to see if anyone would be able give some feedback to my Random Quote Machine project.

Thank you in advance :smiley:

FCC - Random Quote Machine

1 Like
2

Overall, very nicely done. You just used jQuery for this, which is perfectly fine, but I would suggest you use a framework (probably React) for at least one of these front-end projects since part of the reason for doing them is to learn a framework.

A few suggestions on the UI:

  • The quote text is hard to read, it doesn’t have enough color contrast with the background. I think you need to increase the opacity on the quote-box.
  • Consider using a <blockquote> for the quote. You could even wrap the whole thing in a <figure> and use a <figcaption> for the reference: see the MDN blockquote docs.
  • Responsiveness to changes in view port width is very good but when I increase the text size it starts to break down a little. When you need to set height/width on elements that contain text you should use em (or rem) units so that the element can grow as the text size gets bigger. If you don’t quite know what I am referring to, google for ‘zoom text only’.
  • When I use the keyboard to navigate your page I can’t see the keyboard focus indicators at all. You are relying on the browser’s default indicators, which are almost never good enough. Customize the focus indicator using the CSS outline property on the :focus pseudo-class.
  • Those three icon links at the bottom need to have some actual text associated with them. The easiest way to do this is to add the text in the <a> tag and visually hide it. Google ‘visually-hidden text’ to figure out how to do this.
  • One suggestion for your JS code. I would replace a lot of those lets with const. I think standard practice nowadays is to always use const except when the variable needs to be updated.
  • The line window.sessionStorage; can be removed completely since you aren’t saving the Storage object. If you are using sessionStorage just because you wanted to learn how it works that is fine, but I don’t think it is really needed here since you can just keep track of the current index with a simple variable. OR, if you want to make some use of local storage, you could use localStorage instead and then when the page initially loads you could pull the last index from local storage to prevent them from getting that index again on the first quote they see.
3 Likes
3

Hi @dwisatriow !

I think your page looks good.

I think the next project would be the perfect candidate for that.
That ended up being one of my favorite projects :grinning:

Keep up the good work!

1 Like
4

Hi @bbsmooth,
Thank’s for the valuable feedback :smiley:. I will try to fixed it with the suggestions you point out. And I did already used React for other next projects too.

5

@jwilkins.oboe Thank you :smiley:

6

Hi @dwisatriow

Congratulations upon completing the project. Great observations by @bbsmooth and @jwilkins.oboe . One issue which you can look into is content jumping around when you switch from one quote to another. I have never been a fan of it. To be honest I have also struggled with it a lot.

1 Like
7

I’m not sure you can avoid height changes in the quote box, especially if you are pulling random quotes and don’t know what the max length of the quote will be. But I think you could make it so that the top of the box always stays in one place so it doesn’t appear to jump up and down.

8

@bbsmooth @nibble
Thanks for the feedback guys.
What I can think of it is setting the overflow of the quotes to scroll, but I don’t really like if some part of the quotes is hidden.
So probably I would just add an animation when the quotes is changing, like fading out then in or growing and shrinking in size smoothly :smiley:

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.