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!


I have a solution for these two. The first one is just a matter of moving the call to getImage from right after getQuote to inside the getJSON callback function at the end. The second problem is caused by the fact the browser is caching the url which is the same until you click the Get Quote button again. All you need to do is add an extra parameter with a random number to the unsplashURL query string like:

unsplashURL = "url(https://source.unsplash.com/600x600/?" + randomCategory + '&sig=' + Math.random();

This will force the browser to pull another image instead of using what was already in the browser cache. The random number on the end after the &sig= is what makes this work.

1 Like

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…

It is &sig not $sig

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