Snippet trouble

Sometimes, you copy some code off a CodePen and it doesn't work. Here are a few things you can try:

To begin, make sure you have copied all the code from each section, and put it in its proper place. If you're copying from the CSS area, that code either goes in your .html file with <style></style> tags, or in your .css file without <style></style> tags.

Same goes for Javascript - if you're copying JS, it goes in <script></script> tags in your .html file, or without those tags in a linked .js file - but for JS it gets a bit more complicated.

Javascript caveats

With Javascript, it very much matters when the code is run. If it runs too early, nothing will happen.

You can fix this by wrapping the Javascript code in another piece of code. This code tells the document not to execute the code until all of the elements on the page are loaded.

Paste your code inside of this bit of code, and hopefully when you try it out again, things will work as they did in the CodePen.

document.addEventListener("DOMContentLoaded", function() {
    // paste all of that juicy code here
}