Random Quote Generator (with images) - help with tweaks

Hi everyone,

I’ve been messing around with APIs through the random quote project, and have come up with the following result so far :

Random Quote Generator

I’m happy things are starting to make sense, but would like some help with my Pen :

  • what is the best method for me to center the quoteContainer div within the imageContainer div?
    It’s centered horizontally but not sure how to do it vertically. Have put a margin-top value on the child container to get around the problem but it’s not very aesthetic.

  • my codepen seems to have problem loading the initial background image, maybe I’m not seeing the problem because it’s 3 a.m but it keeps loading a “couldn’t find…” image instead of the moon image I selected.

  • I wanted for the background image to change every time I click on it, but I seem to only be able to do that once I use the getQuote button. I have a feeling the problem is going to be obvious in the morning, but posting it anyway…

Thanks for your input!

Jeff

Hey, thanks a lot for the answer,
I can’t seem to make the “$sig=” tip work, nor find much documentation on adding random parameters to URL to avoid cache issues.

https://source.unsplash.com/?nature$sig=2 will embed a random photo fitting the keyword “nature$sig=2” so won’t work…

whooops… Thanks!
Crazy how oblivious you can be to typoes after too much time in front of a screen…