This repository has been archived by the owner on Mar 29, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
/
balloon.html
52 lines (39 loc) · 1.92 KB
/
balloon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--
1 - Balloon (4/3/2020)
Write a page that displays a balloon (using the balloon emoji, 🎈). When you press the up arrow, it should inflate (grow) 10 percent, and when you press the down arrow, it should deflate (shrink) 10 percent.
You can control the size of text (emoji are text) by setting the font-size CSS property (style.fontSize) on its parent element. Remember to include a unit in the value—for example, pixels (10px).
The key names of the arrow keys are "ArrowUp" and "ArrowDown". Make sure the keys change only the balloon, without scrolling the page.
When that works, add a feature where, if you blow up the balloon past a certain size, it explodes. In this case, exploding means that it is replaced with an 💥 emoji, and the event handler is removed (so that you can’t inflate or deflate the explosion).
-->
<p>🎈</p>
<script>
const maximumPossibleSize = 50;
let balloon = document.querySelector("p");
let originalFontSize = 15;
balloon.style.fontSize = originalFontSize + "px";
function growBalloon() {
originalFontSize += originalFontSize * 0.1;
if (originalFontSize > maximumPossibleSize) {
balloon.textContent = "💥";
window.removeEventListener("keydown", changeBalloon);
}
else {
balloon.style.fontSize = originalFontSize + "px";
}
}
function shrinkBalloon() {
originalFontSize -= originalFontSize * 0.1;
balloon.style.fontSize = originalFontSize + "px";
}
function changeBalloon(event) {
if (event.key === "ArrowUp") {
growBalloon();
event.preventDefault(); // To prevent scrolling of browser window
}
else if (event.key === "ArrowDown") {
shrinkBalloon();
event.preventDefault(); // To prevent scrolling of browser window
}
}
window.addEventListener("keydown", changeBalloon);
</script>