How do I take code from Codepen, and use it locally?

20
votes

How do I take the code from codepen, and use it locally in my text-editor?

http://codepen.io/mfields/pen/BhILt

I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.

<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css"  src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>

I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.

I have also included the jquery library as I understand a lot of the codepen creations use it.

The only console error I'm getting is 

Uncaught TypeError: Cannot read property 'getContext' of null

which is linking to my js file, line 4

(function(){

var canvas = document.getElementById( 'animation' ),
    c = canvas.getContext( '2d' ),

Sorry if this is dumb, but I'm new to all this. I'm sure this is basic as hell. Any help would be awesome!

5
javascriptcsshtmlhtml5-canvas

5 Answers

18
votes

Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.

7
votes

Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.

enter image description here

4
votes

It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;

    $( document ).ready(function() {
      // js goes in here.
    });

either u can try this....

    function init() {
     // Run your javascript code here
  }
document.addEventListener("DOMContentLoaded", init, false);
2
votes

looks like you are calling the JS before the DOM is loaded.

try wrapping it in a 

$(function() {
    // your code here
});

which is the same as 

$(document).ready(function() {
    // your code here
});

if you are using jQuery.

or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed

Or you could name the function in your JS and execute it onLoad of the body:

<body onLoad="yourFunction();">
1
votes

To download the computed html of a codepen, go to the codepen of your choice, then click the "Change View" button and go to the "full page" mode.

Now depends on your browser.

Firefox

display the source code (Cmd+u) and go at the very bottom. Look for the last iframe and click on the value of the src attribute. There you go.

Chrome

Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option. There you go.