Random Quote Machine - Redone

Code Feedback
1

Project Link: https://codepen.io/tchbell/full/vZxVrK/

Feedback is appreciated. Thank you

2

On a wide screen (pc) it looks like:

image
image1186×609 52.7 KB

Very difficult to read the text, because it is too close to the same color as the background color.

1 Like
3

So a few issues I had -

  • It’s non-responsive. When I resized to a smaller window, the text flooded out of the opaque box and onto the background image.
  • Speaking of the dark opaque background - the dark text on top of the background makes reading the quote difficult on the eyes. You might want to rethink your font-color.
  • The Tweet button isn’t working for me.
  • Differentiate the author from the quote text. Maybe add a hyphen, or put the author on a new line with a larger line-height, or make the author’s name in a different font / font-size. Lots of options to let the user know who’s speaking the quote.

You got the hardest part of the problem down though - sifting through an array and playing with the data. You might want to break the array up into two arrays, one for quotes and the other for authors. Another option would be to break the array up into a bunch of Objects, like so.

var quotes = [
    {
        quote: "Blimey, that's an owl!",
        author: "Harry Potter"
    },
    {
        quote: "Dobby, noooooo!",
        author: "Hermione Granger"
    }...
]

Both techniques can help with the last bullet point I mentioned above. An array of Objects also prepares you for working with APIs, since APIs are written in JSON and Object notation is very similar.

1 Like
4