Animate your name - does not work when I upload the code to my site


It works in CODE academy platform but when I create an html file + a js file with the codes to include the animation in my site, the animation does not work. It only shows this:

{\rtf1\ansi\ansicpg1252\cocoartf1348\cocoasubrtf170 {\fonttbl\f0\fnil\fcharset0 Menlo-Regular;} {\colortbl;\red255\green255\blue255;\red184\green14\blue61;\red247\green238\blue241;} \margl1440\margr1440\vieww10800\viewh8400\viewkind0 \deftab720 \pard\pardeftab720\sl440 \f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0 \outl0\strokewidth0 \strokec2 \ \ \ \ \ \ \

I made a folder in my site and included the .html file containing the html code and a .js file containing the java script code. It is not working. Any help? :slight_smile:

This is what it is in the index.html file:

<!DOCTYPE html>
    <script type="text/javascript" src="//"></script>
    <script type="text/javascript" src=""></script>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="main.js"></script>

And this is what it is in the main.js 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 = "LIO";

letterColors = [red, orange, green];
if (10>3) { 
bubbleShape = "circle";
else {
bubbleShape = "square";
drawName(myName, letterColors);


First thing that I notice, is you need to add http: at the beginning of that URL.


Change this <script> element:

<script type="text/javascript" src="//"></script>


<script type="text/javascript" src=""></script>

And it looks like your index file is in the rtf format, make sure it has a .html extension.


Thanks for the quick response! Sadly it is not working yet :frowning:
The file is with html extension and I added the http://
This code appears in the screen when I call the index file:

{\rtf1\ansi\ansicpg1252\cocoartf1348\cocoasubrtf170 {\fonttbl\f0\fnil\fcharset0 Menlo-Regular;} {\colortbl;\red255\green255\blue255;\red184\green14\blue61;\red247\green238\blue241;} \margl1440\margr1440\vieww10800\viewh8400\viewkind0 \deftab720 \pard\pardeftab720\sl440 \f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0 \ \ \ \ \ \ \ \ \ \ \ }

Thank you so much for any new ideas :wink:


As @factoradic mentioned, it sounds like your editor is saving the file in rtf format rather than plain text. Which editor are you using?


I copied and pasted the code into textedit and changed the extensions once they were saved.
I think we are getting closer. Now instead of changing the extention of the html, I saved as HTML directly from textedit. Now it does not show an error in the browser, but it shows the exact HTML code :frowning:

Any other idea? Thank you very much. :slight_smile:



Hi! I think I got it.
At first, put the html code into an .html file and for the javascript I did a file called main.js
Apparently main.js is a library and I didn't have to create a file called main.js
So what I did is to include the whole javascript code in the same html file (inside body) and it worked :smiley:

Thank you all for your help.



I'm glad that it's working for you!

I don't want you to go through life confused so here are a few comments. :slight_smile:

This is not true:

main.js is a library

jQuery is a library though.

As your files get bigger you will not want to include your .js code in your .html files because it is confusing and messy. Since this is a smallish project you should try again to get that working using main.js to hold your JavaScript code.


Thank you! Your help is great. I will try to do it in different files then. I will try until I get it :wink:
Thanks again!


You should also get bubbles.js and alphabet.js and keep them with your other files. That way you don't have to worry about them disappearing from their current locations.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.