CODEWITHSUNDEEP
javascriptcsshtmlhtml5-canvas
Sam Mcleod
Sam Mcleod

Reputation: 425

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

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!

Upvotes: 24

Views: 49313

Answers (6)

snuka
snuka

Reputation: 1

In case they are using bootstrap, after copy pasting all the html, css, js codes, you need to add bootstrap CDN links in your html file. Go to : https://getbootstrap.com/docs/5.0/getting-started/download/

Upvotes: 0

ling
ling

Reputation: 10017

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.

Upvotes: 0

thangdc94
thangdc94

Reputation: 1632

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

Upvotes: 7

&#193;lvaro Arranz
&#193;lvaro Arranz

Reputation: 2035

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.

Upvotes: 23

Shariq Ansari
Shariq Ansari

Reputation: 4641

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);

Upvotes: 3

Joe Fitter
Joe Fitter

Reputation: 1309

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();">

Upvotes: 1

Related Questions