This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

How can I make bouncing bubbles work away from Codecademy?

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

It is very easy to accomplish. You should create files called main.js and index.html. Then you have to copy code from your Codecademy project (index.html and main.js tabs) and paste it inside corresponding newly created files.

You should remember that:

  • you should not change the name of your script file (main.js) unless you also change the file's name in your .html file
  • you can change name of your html file (for example to animation.html)
  • both files have to be in the same directory (for example root, public_html or desktop)

Return to Frequently Asked Questions


0 votes

permalink

Please can we have the other code files?

I am trying to learn how to complete this exercise whilst creating my canvas etc.

thanks for all your efforts - this website is great for beginers.

Ryan

455 points
79d892f27be0b89b8892ad660afc4f66?s=140&d=retro
Submitted by
ryancox
over 3 years ago

2 Comments

55df2afa95e3787b9200005e_359368177 Judy over 3 years ago

Hi Ryan, I'm glad you are finding this helpful. Check the index.html tab in your project. It contains links to all the external files. More questions? Just ask.

415dac03ce3b6dd7464b4f2359be82af?s=140&d=retro Sourav Gosain over 2 years ago

i also find this site vry helpful.... Thanx codecademy


0 votes

permalink

Hi AlbionsRefuge,

Thanks alot for getting back to me so promptly.
Yes, i did not think about doing that. Great!!! i will have a look through the code and learn how to create a Canvas. I am going to try and edit the dimensions of the canvas.
Thanks alot

I am spreading the word about CodeCademy in the UK. Great site, Great idea, Great execution.

Kudos

Cheers
Ryan

455 points
79d892f27be0b89b8892ad660afc4f66?s=140&d=retro
Submitted by
ryancox
over 3 years ago

3 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Hello Ryan! We are still working on that, but I think that it might be helpful for you even in this stadium. Here you can find bubbles.js with comments written by me and AlbionsRefuge - https://github.com/AlbionsRefuge/bubbles-faq/blob/master/gists/bubbles.js Line 248 should interest you ;)

79d892f27be0b89b8892ad660afc4f66?s=140&d=retro ryancox over 3 years ago

Hi Maciej

Thanks for this, i will take a copy of this code and create a new 'Bubble.js' (with your permission of course :)). i then need to learn how to direct teh src to a local 'bubbles.js'.

Always learning!!!

Love you pic BTW lol

Thanks
Ryan

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Hahaha, thank you :) You do not have to ask for permission, we made that to make bubbles.js easier to customize and to understand. So we are pleased that you will use this. But, as I mentioned above, if you want to use bubbles.js on a public site, then it would be nice to add an information that this animation was inspired and build upon a work of Google, Rob Hawkes, and Mark Brenig-Jones & Emile Petrone. To direct the src to a local file, if your html and js files are in same directory, you can use this code: :) In case of any questions do not hesitate to ask!


0 votes

permalink

hm... little help please,
i'm Keenan

this is my code, it's passed all the exercise but it won't be appered in my browser. so little help please

it's my index.html code

    <!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 my main.js

    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 = "Keenan";
var letterColors = [red, orange, green, blue, purple];
if(15 > 5) {
    bubbleShape = "circle";
} else {
    bubbleShape = "square";
}



drawName(myName, letterColors);
bounceBubbles();

823 points
54cc98a59113cb3acf000c4b_64020033
Submitted by
Muhammad Keenan
over 3 years ago

5 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Works for me. Hm, try to change this line '' into ''. Or read this article -> http://www.codecademy.com/forum_questions/533869a69c4e9dd03e0070d9 . Which web browser you use?

Picture Man Veer Singh about 3 years ago

hey , tnx , you made my day....that was the mistake.....!!!, if you are a person of codecademy, you must change the codecademy code, as many are facing this problem...!!!

kudos...!!

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

Hello, sorry that so late. Hm, I am not a codecademy employee, I am only a volunteer moderator. The problem is that the code provided by codecademy is good, there should not be a http prefix. Why? There are two protocols in which site might work -> http (normal) and https (secure version). Because in codecademy code, protocol is not defined script will be loaded in a current one (so it will work in both protocols). Problems arise when users try to use this code in environment different than web. File system uses special protocol called 'file'. It means that if protocol is not defined, browser will treat every link as a link to a file, not a web resource. In summary, in my opinion, they choose a best way to link these resources. It is not perfect, but every other solution would cause a lot more problems :(

54cc98a59113cb3acf000c4b_64020033 Muhammad Keenan about 3 years ago

thanks for your help, Maciej Wiercioch !

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

You're welcome Muhammad :)


0 votes

permalink

How do I put them both open at the same time? I am on mac and did everything as you said but how do I open both files into my web browser at once (Chrome or Firefox) and make the name appear? (I am pretty new to this stuff) I also would like to make it the heading for my website, credit will be given of course. here is the code I did

my index.html

console.log(<!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>)

my main.js

console.log(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 = "Kaidan";
letterColors = [red, orange, green, blue, purple]

if(15 > 5) {
    bubbleShape = "circle";
}

else {
    bubbleShape = "square";
}

drawName(myName, letterColors);
bounceBubbles()
)

Thanks, Kc

(Don't know why the main.js doesn't wanna show up on here but I checked it and it is right I am sure.)

148 points
F50346655bfb9c20ede3699b6eff142f?s=140&d=retro
Submitted by
kc01
over 3 years ago

7 Comments

F50346655bfb9c20ede3699b6eff142f?s=140&d=retro kc01 over 3 years ago

I mean I don't know why the index.html doesn't want to show up. The main.js comes up fine

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Hello Kaidan :) You just do not need these console.log statements around both files. I corrected your code, take a look here -> https://gist.github.com/factoradic/649c65ab8d28e8cc0084 If it would not work or in case of any further questions, do not hesitate to ask.

F50346655bfb9c20ede3699b6eff142f?s=140&d=retro kc01 over 3 years ago

Thanks

F50346655bfb9c20ede3699b6eff142f?s=140&d=retro kc01 over 3 years ago

now do I just run them both at once?

F50346655bfb9c20ede3699b6eff142f?s=140&d=retro kc01 over 3 years ago

into my web browser
or make it the heading of my website?

F50346655bfb9c20ede3699b6eff142f?s=140&d=retro kc01 over 3 years ago

Don't worry figured it out
Thanks fr the help

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Great that it works now! :) You're welcome!


0 votes

permalink

Hey there,
I would like to implament these animation in my website.
But it won´t works, only local from my hdd.
My Hoster is One.com

Thanks for any respond

Richard

638 points
547b688552f8638072008c60_575329152
Submitted by
Richard
over 3 years ago

8 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

Hello Richard :) I am in train right now and I do not have all the necessary tools, but I think I know where the problem is. To check if I am right please try to change links: http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js, http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js and http://code.jquery.com/jquery-1.10.2.min.js to https versions (just add 's' after http in every link). Please let me know if it solved the problem. If not, I will dig into it in the evening. Regards! :)

547b688552f8638072008c60_575329152 Richard over 3 years ago

Thank you so much Maciej it still running right now -
where was the reason for the error?
best regards
Richard

547b688552f8638072008c60_575329152 Richard over 3 years ago

and thank you for your very quick respond

547b688552f8638072008c60_575329152 Richard over 3 years ago

i´m not sure..
is it necessary to declare the builders as like i´ve done?
sorry for my english what i wrote are my first steps

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 3 years ago

You're welcome Richard, glad it works :) Sorry that I am responding so late, but during travel I rely on wifi from hotspots, so in Poland... usually I do not have access. And please, do not worry about your english, also for me this language is problematic. Where was the reason for the error. Hm, to understand it you have to know difference between http and https protocols. https is a secure http, it means that all data transfers are secured by SSL keys. Your website has a https certificate. This is of course nothing wrong, actually it is very good :) But in https protocol all resources (like JavaScript scripts) must be launched in secure way (in https protocol). That was the reason. About credits, they should be visible (like now), but if they are destroying design of your site, or something like that you can place them inside your main.js file as a comment (at the top of the file add // and then paste credits) :) If you have any further questions you can ask them in German, I will understand.

547b688552f8638072008c60_575329152 Richard about 3 years ago

Danke das du dir die Zeit genommen hast mir zuantworten und das auch so ausführlich.
An das HTTPS Zertifikat habe ich leider nicht gedacht.
Der Fehler erscheint mir nun recht logisch zusein.
Ich werde die Credits nur im Quellcode aufführen.
Mit freundlichem Gruß Richard

Picture Max Minder over 2 years ago

How do i format the files into html or get it to appear on my website sending it through an html code?

Picture Max Minder over 2 years ago

never mind. i added the main.js in at the end of the index.html and it works!!


0 votes

permalink

where do i put the code so it's on a website or so i can see it in my browser and not on codeacademy

169 points
377940db5b1b3218b850768aa93cdbd0?s=140&d=retro
Submitted by
Matte0117
about 3 years ago

1 Comment

5681daa5d3292fc3a10002d5_48386313 Micah Sun about 3 years ago

I was able to save index.html and main.js by following this thread but it opens a web page. I guess that'll work too. Thanks!


0 votes

permalink

If I want to put this in a blog of some sort, for example Blogger. How would I do it? I found how you put in the blog itself using the HMTL/Javascript widget in the layout, but when i copy the index.html the only thing that happens is theres a big box in the area. Do I also need to put the main.js somewhere in there too? Where?

657 points
505ddd27e1858b0002087dbb_465769239
Submitted by
Cristian Cabrera
about 3 years ago

2 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch about 3 years ago

Hello :) At the end of your widget code you have to add pair of script tags and inside this tag you have to paste code from main.js :)

505ddd27e1858b0002087dbb_465769239 Cristian Cabrera almost 3 years ago

Thank you so much it worked perfectly!!!


0 votes

permalink

HI! I was wondering if there were other bubbleshapes than square and circle.

388 points
571e6b5714f3ef31f900042b_234929580
Submitted by
cp99455
about 2 years ago

1 Comment

55df2afa95e3787b9200005e_359368177 Judy about 2 years ago

Hi cp99455, you might be interested in some of these topics https://www.codecademy.com/forum_questions/533857ac631fe9794700a672 -- there is one thread there about how to make more bubble shapes and another where people have been showing off their shapes.