Random Quote machine project attempt feedback

Hi,
Here is my attempt at creating a random quote machine, I wasn’t able to get it to work with React sadly so I used vanilla JS. I’m still waiting for Twitter to approve my developer application to access the API so I thought it’s better to get some feedback during that time, thanks.

Link to the pen:
https://codepen.io/moustafa-ahmed/pen/LYbjgWy

Congrats on completing the project. This one is fairly simple so using React is somewhat overkill. But you’ll definitely want to use it for some of the others since that’s part of the point of these challenges.

A few suggestions:

  • Some of the colors make the content very hard to read, such as the bright baby blue and neon green. You should use the WebAIM color contrast checker to make sure all of your color combinations are accessible.
  • You have set the width on the quote box to 500px which doesn’t allow it to grow wider as I increase the text size. I’m not referring to page zoom here, but text only zoom. Users may be viewing your page with a much larger text size then you anticipate and your page should be able to handle that gracefully. Therefore, I suggest you set the width in em units so the box can grow wider as the text size increase.
  • The new quote button is embedded in an anchor tag, you don’t want this. Lose the <a> and just use a <button> there. (This is related to the second point below.)
  • For accessibility, the twitter link needs to have actual text associated with it. Add something like “Tweet this quote” to the <a> and then you can visually hide it with CSS so it doesn’t show up on the page (google it if you don’t know how).
  • Speaking of <a> tags, you’ve got a bunch of empty ones that should be removed (look at your HTML in dev tools). I would recommend you use codepen’s HTML analyzer.
  • When I narrow the browser all the way in the new quote button drops to a separate line and floats all the way to the left. Was this your intent?
1 Like

@bbsmooth Thanks a lot for taking the time to check my project, as for the comments, allow me to discuss them:

  • Complying with WebAIM in all colors will remove the theme I was going for the sake of contrast. I, however, changed the two mentioned colors to darker ones,
  • Implemented, thank you.
  • Uhm the button is in its own tag, the anchor tag is separated, I don’t understand?
  • There have an issue about the entire Twitter thing, signing up for the API didn’t solve the problem, you still can’t use the web intent from within CodePen.
    Check: https://forum.freecodecamp.org/t/quote-machine-tweet-button-error-on-codepen-due-to-twitter-api/427126
  • Missing tags closing checked and corrected using HTML analyzer, thank you.
  • I tried narrowing down but the button didn’t move away, so I don’t get this point either.

Part of design is making sure it is accessible. Your theme colors should be accessible. For this simple personal project you can get away with it. I pointed this out because if you are going to do this stuff professionally then you will need to know about color accessibility.

The <button> was originally being wrapped in an <a> tag by the browser because of the problems with your <a> tag in the HTML. If you had looked at the HTML in dev tools you would have seen that the <button> was wrapped in an <a>. Now that you have fixed your HTML issues this is no longer happening.

I think you have made some changes to the bottom row which is now preventing the new quote button from moving down to a line of its own at narrow views. Or this also could have been because of the issues you had initially with the <a> tag in your HTML. Regardless, it is now fixed. It’s amazing how many issues clear up when something basic like the HTML is fixed :slight_smile:

1 Like

@bbsmooth weirdly enough right-clicking and choosing “open link in new tab” allows the tweet link to work, while adding target = _blank doesn’t.