Popping balloon

There is a balloon emoji on the page. TRY IT OUT! When you press:

• ArrowUp → the balloon gets bigger
• ArrowDown → the balloon gets smaller

If it gets too big (bigger than 230px), it bursts and turns into the 💥 explosion emoji. After that, the keyboard stops working on it.

<div class="balloon">
  <p> &#127880;</p>
</div>

p {
  font-size: 156px;
  text-align: center;
}

let theBalloon = document.querySelector("p");

window.addEventListener("keydown", codeToRun);

function codeToRun() {
  let theSize;
  let sizeNum;

  if (event.key == "ArrowUp") {   
     sizeNum =      parseFloat(window.getComputedStyle(theBalloon).fontSize);
     theSize= sizeNum + (sizeNum / 10);
     theBalloon.style.fontSize = theSize + "px";
 }

  if (event.key == "ArrowDown") {    
     sizeNum =   parseFloat(window.getComputedStyle(theBalloon).fontSize);
     theSize= sizeNum - (sizeNum / 10);
    theBalloon.style.fontSize = theSize + "px";
  }

  if (tooBig(theSize)) {
    theBalloon.innerHTML = "💥";
    window.removeEventListener("keydown", codeToRun);
  }
}

function tooBig (sizeNum) {
  return (sizeNum > 230);
}

Note – why parseFloat and getComputedStyle?

Because the size on screen is something like "156px"
You can’t do math with “156px”, so:

• window.getComputedStyle(...).fontSize gives "156px"
• parseFloat(...) converts it to 156