Delete Icon
This forum is now read-only. Please use our new forums at discuss.codecademy.com.
0 points
Submitted by Maciej Wiercioch
6 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

Answer 535bd4428c1cccab8d000064

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
Submitted by ryancox
6 years ago

2 comments

Judy 6 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.

Sourav Gosain 5 years ago

i also find this site vry helpful…. Thanx codecademy

Answer 535f7cb27c82ca657d001949

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
Submitted by ryancox
6 years ago

3 comments

Maciej Wiercioch 6 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 ;)

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

Maciej Wiercioch 6 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!

Answer 538c8afd7c82caa65c002998

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();
890 points
Submitted by Muhammad Keenan
6 years ago

5 comments

Maciej Wiercioch 6 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?

Man Veer Singh 6 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…!!

Maciej Wiercioch 6 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 :(

Muhammad Keenan 6 years ago

thanks for your help, Maciej Wiercioch !

Maciej Wiercioch 6 years ago

You’re welcome Muhammad :)

Answer 53982f0d7c82cac206001451

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
Submitted by kc01
6 years ago

7 comments

kc01 6 years ago

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

Maciej Wiercioch 6 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.

kc01 6 years ago

Thanks

kc01 6 years ago

now do I just run them both at once?

kc01 6 years ago

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

kc01 6 years ago

Don’t worry figured it out Thanks fr the help

Maciej Wiercioch 6 years ago

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

Answer 53a73ac5548c3507de005567

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

641 points
Submitted by Richard
6 years ago

8 comments

Maciej Wiercioch 6 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! :)

Richard 6 years ago

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

Richard 6 years ago

and thank you for your very quick respond

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

Maciej Wiercioch 6 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.

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

Max Minder 5 years ago

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

Max Minder 5 years ago

never mind. i added the main.js in

Answer 53bae49180ff334b6300004f

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
Submitted by Matte0117
6 years ago

1 comments

Micah Sun 6 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!

Answer 5400fdae7c82ca2506000362

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?

761 points
Submitted by Cristian Cabrera
6 years ago

2 comments

Maciej Wiercioch 6 years ago

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

Cristian Cabrera 6 years ago

Thank you so much it worked perfectly!!!

Answer 55c668bde39efee48f0005b6

0 votes

Permalink

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

388 points
Submitted by cp99455
5 years ago

1 comments

Judy 5 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.