jasontwuk/eloquentJs_Ch15_Exercise_Balloon.html

## eloquentJs_Ch15_Exercise_Balloon.html
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Ch15-exercise-Balloon</title>
    </head>
    <body>
        <p id="myP">🎈</p>

        <script>
            let balloon = document.getElementById("myP");
            let balloonSize;

            function setBalloonSize(size){
                balloonSize = size;
                balloon.style.fontSize = balloonSize + "px";
            }
            // Set the default font size.
            setBalloonSize(10);

            function resizeBalloon(event){
                if(event.key == "ArrowUp"){
                    // When font size is bigger than 100, make the balloon explode.
                    if(balloonSize > 100){
                        balloon.textContent = "💥";
                        // Prevent any fone size change when it is bigger 100.
                        document.body.removeEventListener("keydown", resizeBalloon);
                    } else {
                        // Inflate 10 percent.
                        setBalloonSize(balloonSize * 1.1);
                        event.preventDefault();
                    }
                } else if (event.key == "ArrowDown"){
                    // Deflate 10 percent.
                    setBalloonSize(balloonSize * .9);
                    event.preventDefault();
                }
            }

            document.body.addEventListener("keydown", resizeBalloon);
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Ch15-exercise-Balloon</title>
	</head>
	<body>
	<p id="myP">🎈</p>

	<script>
	let balloon = document.getElementById("myP");
	let balloonSize;

	function setBalloonSize(size){
	balloonSize = size;
	balloon.style.fontSize = balloonSize + "px";
	}
	// Set the default font size.
	setBalloonSize(10);

	function resizeBalloon(event){
	if(event.key == "ArrowUp"){
	// When font size is bigger than 100, make the balloon explode.
	if(balloonSize > 100){
	balloon.textContent = "💥";
	// Prevent any fone size change when it is bigger 100.
	document.body.removeEventListener("keydown", resizeBalloon);
	} else {
	// Inflate 10 percent.
	setBalloonSize(balloonSize * 1.1);
	event.preventDefault();
	}
	} else if (event.key == "ArrowDown"){
	// Deflate 10 percent.
	setBalloonSize(balloonSize * .9);
	event.preventDefault();
	}
	}

	document.body.addEventListener("keydown", resizeBalloon);
	</script>
	</body>
	</html>