I am working on this HW.

This is based on the "Balloon" exercise (Chapter 15) from Eloquent JavaScript.

Write a page that displays a balloon (using the balloon emoji, ). Use CSS to position the balloon in the approximate center of the page. When you press the up arrow, it should inflate (grow) 10 percent, and when you press the down arrow, it should deflate (shrink) 10 percent.

You can read and control the size of the text (emoji are text) using the font-size CSS property (style.fontSize) on its parent element. Remember to include a unit in the valuefor example, pixels (10px). You may need a regular expression to extract the initial size and units.

The key names of the arrow keys are "ArrowUp" and "ArrowDown". Make sure the keys change only the balloon, without scrolling the page.

When that works, add a feature where, if you blow up the balloon past double the initial size, it explodes. In this case, exploding means that it is replaced with an emoji, the same size as the original balloon, and the event handler is removed (so that you cant inflate or deflate the explosion).

I got the whole thing I just have one question. How do i set the rate of change to be 10 percent? I set it to 10 since i didnt know. if i set it to .10 then i dont see it changing. if you could let me know. thax.

this is my code:

//get the id of the ballon and set it to the ballon varible

var ballon = document.getElementById("balloon");

//check if a key is pressed

window.addEventListener("keydown", event => {

//get the current size of the ballon

var currentSize = parseInt(ballon.style.fontSize);

//varible for rate of change

var changeAmount = 10;

//check if the size is greater than 100 a

if (currentSize >= 100){

ballon.innerHTML = "";

}

//if its less than 100, switch it back

else if(currentSize < 100){

ballon.innerHTML = "";

}

//see if up arrow pressed

//increase it by 10 percent

if (event.key == "ArrowUp") {

currentSize += changeAmount;

}

//see if down arrow pressed

//decrease it by 10 percent

else if (event.key == "ArrowDown") {

currentSize -= changeAmount;

}

//change the size of the ballon

ballon.style.fontSize = currentSize + "px";

})