Freecodecamp Project: Random Quote Machine

Code Feedback
1

Hello, this is my first project on Front End Libraries Projects https://codepen.io/indrasubagja/pen/pobxWeg. Tbh, I’m not really sure the way I use React and achieve every of this project is good. Feel free to give me some feedbacks. :slight_smile:

1 Like
2

Your project looks good @IndraSubagja.

Ocassionally, test #8 fails;
8. When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.

Timeout of 15000ms exceeded. For async tests and hooks, ensure “done()” is called; if returning a Promise, ensure it resolves.
Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure “done()” is called; if returning a Promise, ensure it resolves.

3

This is a pretty solid effort. I just have a few suggestions for improved accessibility and responsiveness.

  • At the default font size the responsiveness is very nice, handles very narrow to very wide view ports perfectly. But if I manually crank up the text size then I start running into a few problems. The “New Quote” text on the button starts to disappear. This is an easy fix, use em for height. And when I start narrowing the browser (still at a large text size) then the button and twitter link eventually overlap. I think at some point you might want to line them up in a single column for really big text sizes. You would use a CSS break point to do this but you would need to use em units for the break point so the text size is taken into account. You can get an idea of what I’m talking about looking at my quote machine: http://words-of-wisdom.surge.sh/. Narrow your browser all the way. Feel free to crank the text size up really big.
  • You should probably have an h1 at the top of the page. Definitely the author name should not be an h5. If you were going to continue using a heading for it then you would want it to be an h2 since you don’t want to skip heading levels. But I would suggest you don’t use a heading for it and instead use some more appropriate HTML tags for quotations. My suggestion is to use <figure> for the quote and then <figcaption> inside that for the author’s name. The MDN page for <figure> even has the following example:
<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

Although I’m not sure if they are using <cite> appropriately.

  • For the Twitter link you’ll want to have some text associated with it. Right now you just have an <i> in it and thus screen readers will not know how to announce it. You can just add some text in there (e.g. “Post this quote to Twitter”) and visually hide it on the page. This link will explain how to do that if you aren’t familiar:
  • I can’t see the keyboard focus indicator when I’m using my keyboard only. The New Quote button and Twitter link should both indicate in some way that the focus is on them when I Tab to them.
4

Thanks @Roma. But, I don’t know how to fix this but I see the example also has this problem when running the test without clicking the #new-quote. If I click it during the test, there’s no problem.

1 Like
5

Thanks, @bbsmooth. I’ve changed my code based on your feedbacks. But, I still don’t understand why .sr-only automatically exist in my project? I don’t use Bootstrap

6

Hi @IndraSubagja. Your form looks good. Some suggestions:

  • Sometimes, when I click the “New Quote” button, it displays the same quote again.
  • When generating random colors, please make sure that the generated colors are eye-friendly. Sometimes, it is so hard to look into the project
  • It would be nice if a random color is generated when the project loads. Right now, the first color is always blue.

Anyway, great job. Keep It Up!

7

I believe that fontawesome defines that class.

8

Thanks @paulsonstech. I’ve changed my code based on your feedbacks.

1 Like
9

Good job! One more: Add more quotes.