15.1 Baloon (Eloquent JavaScript Solutions)

15-1 Eloquent Javascript Solutions.js

<p>🎈</p>

<script>
  let baloon = document.querySelector('p');
  let fontSize = 16;
  let fontUnit = 'px';
  function increaseFontSizeOfElement(node, percentage) {
    fontSize += fontSize * percentage;
    node.style.fontSize = fontSize + fontUnit;
  };
  function listenForArrowUpDown(e) {
    if (e.key == 'ArrowUp') {
      increaseFontSizeOfElement(baloon, 0.1);
      e.preventDefault();
    } else if (e.key == 'ArrowDown') {
      increaseFontSizeOfElement(baloon, -0.1);
      e.preventDefault();
    }
    if (fontSize > 100) {
      baloon.textContent = '💥';
      document.removeEventListener('keydown', listenForArrowUpDown);
    }
  };
  increaseFontSizeOfElement(baloon, 0);
  document.addEventListener('keydown', listenForArrowUpDown);
</script>

Hints

You’ll want to register a handler for the "keydown" event and look at event.key to figure out whether the up or down arrow key was pressed.

The current size can be kept in a binding, so that you can base the new size on it. It’ll be helpful to define a function that updates the size—both the binding and the style of the balloon in the DOM, so that you can call it from your event handler, and possibly also once when starting, to set the initial size.

You can change the balloon to an explosion by replacing the text node with another one (using replaceChild), or by setting the textContent property of its parent node to a new string.