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


#1



https://www.codecademy.com/es/courses/animate-your-name/2/9

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

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);
bounceBubbles(myName);


#2

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


#3

Change this <script> element:

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

to:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

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


#4

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:


#5

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


#6

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:

Lio.


#7

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.

Lio


#8

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.


#9

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!


#10

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.


#11

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