Random Quote Machine -- Wolf Howard

Would love any feedback. Tried to be crafty by making a background image in Adobe Illustrator. I used the placeholder text to circumnavigate a quote appearing automatically, didn’t recognize how to do that until I completed the project and looked at the source code for the example. Should have known to define a function separate from the click event.

Spent most of my time trying to get the mashape API to cooperate. I didn’t recognize that getJSON would take data passed to it and apply it as request headers. I may go back and try to do the whole function via ajax, but using the ajaxSetup method is working right now so I’m happy with it.

Also didn’t dig too deep into getting the tubmlr button working, and in my attempts I only ever got it to share the entire codepen page. Apparently I needed to specify my sharing object as a quote and it would have worked out better. Future functionality could be saving the quotes for each user (outside of codepen obviously) or having voting options (thumbs up, thumbs down) and generating a board of most liked quotes.

It is nice,

You would change the background cause the “Loads o’ quotes” make a little hard to read the quote.


Thanks! Are you on mobile? I need to optimize for smaller screens.

I am not on mobile, i use firefox, firefox developer and chrome.

In both Firefox, if you press “ctrl+shift_M” it change to mobile mode(i think is this the name) so you can test.
In Chrome you need to press F12 and after that press “ctrl+shift_M” or in the cellphone icon, also you can choose some types of phones like iphone, galaxy, etc.


1 Like

Followed your advice and adjusted the pen so that the image is in an img tag rather than set as a background. Also utilized your ctrt+shift+m technique to check my work and decided on using two different sized images with a selective display method in the CSS. Thank you so much for the help!

1 Like