Having trouble with snippets?
Sometimes, you copy some code from a CodePen and it doesn’t work. Here are a few things you can check:
First, make sure you’ve copied all the code from each section and placed it in the correct part of your project. If you’re copying from the CSS section, that code should go either:
- inside
<style></style>
tags in your.html
file, or - directly into a separate
.css
file (without<style>
tags).
The same goes for JavaScript - if you’re copying from the JS section, it belongs either:
- inside
<script></script>
tags in your.html
file, or - in a separate
.js
file, without the<script>
tags.
But with JavaScript, there’s an extra wrinkle: timing matters.
JavaScript caveats
JavaScript can fail silently if it runs before the page is fully loaded. For example, if your code tries to modify an element that doesn’t exist yet, nothing will happen.
To fix this, wrap your code in a listener that waits for the page to load:
document.addEventListener("DOMContentLoaded", function () {
// paste all of that juicy code here
});
Alternatively, if you’re using <script></script>
tags inside of your head to link to an external JS file, you can add defer
to your script like so:
<script src="../js/script.js" defer></script>
This ensures your code will execute once the page has fully loaded.