Write a page that displays a balloon (using the balloon emoji, ??). When you pre
ID: 3912533 • Letter: W
Question
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.
Links to an external site.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>
// Your code here
</script>
This has to be in Javascript. Please help, i have no clue how to do this.
Explanation / Answer
Chegg editor is having trouble displaying balloon and collapsed balloon symbols so I have replaced them with "bal" and "col". Here is the complete code:
Html:
<html>
<p id="par">bal</p>
</html>
CSS:
<style>
p {
font-size: 16px;
}
</style>
Javascript:
<script>
var init=16 ; // initial font size
function arrow(event) { // function to handle arrow keys
event.preventDefault(); // to prevent default scroll functions
var par = document.getElementById("par"); // getting the paragraph
switch (event.key) { // switch case
case "ArrowDown": //In case of arrow down pressing
init=init-(init*0.1) ; //Decreasing the ballon size by 10%
par.style.fontSize=init+"px" ; //Updating the new balloon size
break;
case "ArrowUp": //In case of arrow up pressing
if (init >=40){ // Setting the max ballon size to 40px
par.textContent="col" ; //Repacing with collapsed balloon
window.removeEventListener('keydown',arrow); //Removing any more inflating/deflating
}
else{
init=init+(init*0.1) ; //increasing the size of balloon
par.style.fontSize=init+"px" ;//Updating balloon size
}break;
}
}
window.addEventListener("keydown",arrow) ; //Event listener when key is pressed
</script>
.I have kept the max size to be 40 px and default size as 16 px.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.