How to run a .js file in codePen?

How to run a .js file in codePen?
0

#1

I am watching the freeCodeCamp youTube videos and want to practice it myself. I have got codePen and have saved a .js file and written out the code from the tutorial. Nothing displays in the console. How do I run a .js file in the console like Beau is in the videos?

cheers
Mike.


#2

Assuming you mean that you just have some JS code written in to the JS section on the Codepen, you are looking to run it and get a display in the console?
Turn off >settings>behavior > auto updating preview (top right)
Turn on Console (bottom left)
Hit Run (top center)

Here’s a quick example:

This should evaluate your JS and output any calls to console log, etc


#3

So basically all I have written is:

var myName;
myName = “Mike”;
console.log("My name is " + myName);

which would display, My name is Mike

That’s all I want to do, write simple code to practice how different things work and display it in the console so I can see the result.

I have looked at what you suggested, I can’t find auto updating preview (top right). I don’t know whether being on the free online version makes a difference?

Is there any other software that I can use for this? I have got DreamWeaver and Brackets on my Mac, but I am having the same problem using them.

Cheers
Mike.


#4

Settings


Behaviour > Auto-udpate preview > off

Console

I personally love atom on my Mac from https://atom.io as a full fledge JS test suite


#5

Thank you for all your help, I will have a look at Atom to see how I get on :slight_smile:


#6

You can use jsbin as well.


#7

This is what I am getting when I press cmd I to run the javascript in the console on Atom. Do you know what I need to do to solve this problem?


#8

try launching atom from terminal with “atom .” If I remember correctly this is needed to load your path variables


#9

My guess is that in CodePen, you created a new ‘project’ instead of a new ‘pen’. The suggestions above assumed you created a pen. Try going to ‘create’ then ‘new pen’. Also, most of the JavaScript videos on freeCodeCamp YouTube have a link in the description to the code on CodePen. Once you click the link, click the ‘fork’ button at the top to make your own copy. Then you can make changes and see the result.

Another thing to check is that you have clicked the ‘console’ button at the bottom to open the console.


#10

Thank you to everyone for there advise and help.

I have downloaded the example html, css and javascript files from p5js then downloaded google chrome. I opened the downloaded files in DreamWeaver 2017 and wrote my code in the .js file, then I ran it in chrome and opened the inbuilt javascript console in chrome.

Works perfectly :slight_smile: