Feedback: Random Quote Machine (front end certification project)

I just finished my beta of the Random quote machine made in react, what do you guys think?

https://al3busse.github.io/Random-Quote-Machine/

(i still have to fix the new quote button so it doesnt bug out if you press it too fast to many times)

That's really good man. I'm working on that project right now. How did you get the code to display onto the white box at the bottom of the codepen thing?

1 Like

Thanks @nleeburch, I didnt make this one in codepen, but do you mean the codepen example? i used bootsrap to divide a card component ( the “white box”) into 4 pieces: text, author, sharing buttons and new quote buttons. If you want to share your codepen or code with me i may be able to help you, using boostrap or grid should work in order to divide the box.

That’s looking really good, well done!

One criticism though is that some of the colour combinations you’ve used have a really low contrast, particularly with the thinner font you’ve used for the author. This means that the text can be hard to read and it hurts the accessibility of your site.

What I would suggest is using a website like http://colorsafe.co/ to pick your colours, since it will only return those that contrast well with the black of your card component.

Just a few suggestion:

  • you don’t need a <button> wrapping the <a>s. If you need something wrapping the <a>s for styling purposes, use a <div>.
  • You should probably have an <h1>, which would be the ‘Random Quote Machine’ heading.
  • As I increase the text size, the top of the quote box moves up and eventually out of sight and I cannot use the scroll bar to get it back.
  • I would make the signature bigger. That font is hard to read at smaller sizes.

@deliciousfudge The colours are randomized from #000000 to #FFFFFF, so ya, it can even be the same colour of the box and really low contrast. I can probably add a color inverter for the box and buttons when the contrast of the bg colour is too low, but maybe later, im finishing the markdown preview project right now :smiley:

Gotcha! One other possible approach is to do what they do in the example project, which is to create an array and fill it with as many colours as you want / were confirmed to contrast with the background. Then each time the quote changes you would pick a new colour from the array.

@deliciousfudge ya, i didnt want to use 5 colours in an array, i wanted all of them ahahah

When you generate the next random color, check if it is an acceptable contrast with black and if not then generate another one, repeat until an acceptable color is found.

@bbsmooth

  • Removed the <a>, i didnt know the buttons worked in the same way
  • Moved the title from the <card.title> to an <h1>
  • Did some fixes to fonts, body background colour and scroll overflow
  • I have to make the algorithm to do the contrast check or google it one of these days.