CodePen.io acting differently than web server

1

Hi!

I am new to freeCodeCamp as well as CodePen.io so I apologize if there is an obvious solution to this question. I just completed the “Random Quote Machine” project for intermediate front-end development. I am having an issue with how it is being rendered in CodePen.

I have it hosted on a web server and it looks like this: http://kbolster.webhost4life.com/FullStackDeveloper/RandomQuote/index.html

the colors will change when you click the “Get Quote” button.

On CodePen I couldn’t get any of the colors to show up or change. Can someone help me to figure out why so I can get it looking the same on both platforms?

Thanks in advance!
Kathryn

2

Oops here is the codepen link: https://codepen.io/kbolster/pen/wrJoeM

3

Hey. Try adding your scripts in the pen settings, instead of having them in the HTML panel, like so:

e4e5b6ec6f4152a5d56b09ccc8997238.png943×273 15.1 KB

Same goes for the CSS files (fonts included) that you have in the “Stuff for head” section. You always want to have your external resources in the pen settings, when working on Codepen.

jQuery UI wasn’t being loaded properly (which is what you’re using to animate your background-color).

4

Awesome!!! Thank you so much! :slight_smile: It’s working great now - I didn’t realize how to add the scripts with codepen - thanks again!!!