Skip to content

Instantly share code, notes, and snippets.

@yitonghe00

yitonghe00/Eloquent JavaScript 1501 Balloon.html

Created May 17, 2022 04:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yitonghe00/1e07d1b4927a459613f0e70fbc897a1c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yitonghe00/1e07d1b4927a459613f0e70fbc897a1c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yitonghe00 created this gist May 17, 2022.
    32 changes: 32 additions & 0 deletions Eloquent JavaScript 1501 Balloon.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    <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>