Does not work in browser console


#1

https://www.codecademy.com/courses/animate-your-name/0/1

so i did the lesson and i coppied the script and pasteted it in the javascript console in chrome and it does not work how do i fix this?


#2

This program will not run in the console. It requires a browser window and the HTML5 canvas element.


#4

ok thanks alot this helpes :grinning:


#5

i had a browser window open i just made the cosole bigger for the page i was on i was on the page about:blank


#6

how do you get the HTML5 canvas element can you give me the download?


#7

You have the canvas element already in your browser. Be sure you have an HTML page that links to style sheets and loads script. To run everything, click on the index.html file in your file directory.


#8

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

This is the HTML given in the first lesson. We should note that two files are CC assets so don't put this on the web. That would be copyright infringement.


#9

We can have the console open to watch for error messages, but we still need a web page.

Here is what I just did to put this together:
In my documents folder, created new directory, Projects.
In the Projects folder, created a new directory, Animate Your Name.
In the AYN folder, created a new directory, js.
In the js folder, downloaded and saved, alphabet.js.
In the js folder, downloaded and saved, bubbles.js.
In the editor, created and saved index.html in the AYN folder.
In the editor, created and saved, main.js in the js folder.

So now we have,

Animate Your Name/
+  js/
   +  alphabet.js
   +  bubbles.js
   +  main.js
+  index.html

Here is my index.html file:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script src="js/bubbles.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

And here is the main.js script file:

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var myName = "Wee Gillis";
var letterColors = [red,orange,green];
//bubbleShape = "square";
if(10 > 3) {
    bubbleShape = "circle";
} else {
    bubbleShape = "square";
}

drawName(myName, letterColors);
bounceBubbles();

The other two you have links to for your own download. Recommend NOT to link to CC assets from your machine. It is not a public CDN, per se, but for their own use.

From inside the editor (Notepad++, in my case) I used the Run > Launch in Chrome option to kick it off in a new browser window. Right-click that window to Inspect.

I'm going to flag the post where I bring up copyright and see if we can get some clarification on that. The files may be in the public domain, but we don't know that for sure. It is never safe to assume.


#10

Our animation is based on external script files. You can use them outside Codecademy, but you should not claim that you wrote them or try to sell them. If you use them on a public website the right thing to do would be to give credit to the work done by others just as the people at Codecademy did. "We want to thank Google, Rob Hawkes, and Mark Brenig-Jones & Emile Petrone. This course was inspired by and built on their work."

The above was posted a couple of years ago to a similar question. It follows that we will in all due diligence given attribution to the work somewhere in our source code. For personal use and for the purpose of study or criticism, this is considered fair use.

The resources that are included with this project, namely image files, may be downloaded to one's own computer. This is preferrable to hot linking which CC does not encourage. As stated above, we should not be pulling resources down from CC's servers in our own pages. Load them locally from your own machine.