How does bounceBubbles() work?

Is it possible to up the code introduced into this lesson into HTML?

drawName('Your Name Here');

bounceBubbles();

I have a website in HTML and I would like to get some of the headings to react in the same way. I am just unclear as to how HTML and this code would work together.

21 Likes

I am completely new to coding… what should I enter in the bounceBubbles()

12 Likes

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id=“demo”>A Paragraph</p>
<button type=“button” onclick=“myFunction()”>Try it</button>

</body>
</html>

6 Likes

what about what you will code in the page of js?

1 Like

I am terribly sorry, what is your question again please…

2 Likes

How come the letters in the previous lesson is colored while the letters in this one are gray?
The code look the exact same, are you hiding things from us?

44 Likes

Hey there Methodslayer, so the instructions on this exercise page, is to only interact with the first line of code :+1: and not the javascript method to animate the bubbles

4 Likes

So there’s a few questions here:

  1. bounceBubbles() just needs to be run as is, it changes the text so that it will be all bubbly and bouncy.
  2. The code in order to make that is quite a bit more advanced and something that would come with further lessons in javascript, however if you want to peak behind the curtain - click the small folder icon, then click bubbles.js. Be careful not to edit anything though as you could break it.
  3. This lesson is just the barest of introductions, follow through and if this type of programming interests you - follow web development courses and our courses on javascript.
13 Likes

Can I be guided with what can I do with bounceBubbles()?

2 Likes

Finish the course then come back to this question. Best not to stray from the path until you have some tools in your kit and a better idea of how to plan, start and complete a project.

6 Likes

No… bounceBubbles is you remove it… the bubles is not exploding when you hovering on it…

1 Like

How do bounce bubbles know to be bounce bubbles? How/why exactly do the letters know to bounce when you rollover them. To me they’re just a font, but how does the font know to be a font. Thinking too much

1 Like

Hi @array5773926193 the text knows to be bouncy and bubbly through the javascript bubbles.js. If you want to know exactly how this is done, you can inspect bubbles.js. They are, in fact, not a font and have little to do with a font at all. For simplicity, let’s say the font, in this case, provides the outline of the letters. If you take Comic Sans MS as the font, the letters will have a different outline than if you took Cupertino or Libertinus or Doulos for a font. The bubbles are affected by the font in the way of their arrangement on the screen, they do not influence the font in any way themselves.

3 Likes

Five years ago we created a FAQ regarding this project. You can find archived version here -> https://www.codecademy.com/forum_questions/533857ac631fe9794700a672.
Article How does alphabet.js work? and bubbles.js with comments gist might shed some light on the nature of the bubbliness :slight_smile:

4 Likes

How do I use BounceBubble?

wow… this is very cool i wish i could afford to pay for this program monthly . i am really enjoying it .

1 Like

Why there are always some semicolons? I deleted them and it still works well.

Hey @bit1204184061 that’s good to hear! I am also thoroughly enjoying the courses and the forums :wink: .
Happy Coding!

thank you :slight_smile: