https://eloquentjavascript.net/15_event.html#i_ZPJB9UFdQA

Eloquent JavaScript 1501 Balloon.html

<p style="font-size: 16px;">🎈</p>

<script>
  const p = document.querySelector('p');
  const inflate = (event) => {
    event.preventDefault();
    const size = Number(p.style.fontSize.slice(0, -2));
    if (size > 100) {
      p.textContent = '💥';
      window.removeEventListener('keydown', keydownHandler);
    }
    p.style.fontSize = `${size + 10}px`
  };
  const deflate = (event) => {
    event.preventDefault();
    const size = Number(p.style.fontSize.slice(0, -2));
    if (size <= 10) {
      return;
    }
    p.style.fontSize = `${size - 10}px`
  };

  const keydownHandler = (event) => {
  	if (event.key === "ArrowUp") {
      inflate(event);
    } else if (event.key === "ArrowDown") {
      deflate(event);
    }
  };

  window.addEventListener("keydown", keydownHandler);
</script>