Have this code so when a user presses the up or down key the balloon grows or shrinks. Need balloon to burst to "" when it reaches font size over 70

Question

So far the balloon should only be able to reach max 70 font before it bursts. I need to turn the balloon into "". The event listener needs to be removed when the balloon bursts.

let para = document.querySelector('p');
para.style.fontSize = '24px';

window.addEventListener("keydown", e => {
  var sizeAsInteger = parseInt(para.style.fontSize, 10);

  if (e.key == "ArrowUp") {
    sizeAsInteger += 10;
  } else {
    sizeAsInteger -= 10;
  }

  para.style.fontSize = sizeAsInteger + 'px';
});

p {
  font-size: 50px;
}

<body>
  <p></p>
</body>

Welcome. Please see [ask] and take the [tour], then revise your post title to ask a clear, specific, _concise_ question. — isherwood, Apr 28 '22 at 20:14
I see no attempt to do what you describe in your code. You're expected to make an effort and show your progress. — isherwood, Apr 28 '22 at 20:17
@zer00ne BLEW MY MIND! I didn't think that something like that could be done with pure css! Wow!!! — Shmack, Apr 28 '22 at 20:56

Inder · Accepted Answer · 2022-04-28T20:38:09.670

Is this what you want?

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

para.style.fontSize = "24px";

const increaseSize = e => {
  var sizeAsInteger = parseInt(para.style.fontSize, 10);

  if (sizeAsInteger >= 70) {
    window.removeEventListener("keydown", increaseSize);
    return (para.innerHTML = "");
  }

  if (e.key == "ArrowUp") {
    sizeAsInteger += 10;
  } else {
    sizeAsInteger -= 10;
  }

  para.style.fontSize = sizeAsInteger + "px";
};

window.addEventListener("keydown", increaseSize);

p {
  font-size: 50px;
}

<p></p>

Have this code so when a user presses the up or down key the balloon grows or shrinks. Need balloon to burst to "" when it reaches font size over 70

1 Answers1