Створить сторінку, на якій відображається повітряна куля (використовуючи емоджи 🎈 https://emojipedia.org/balloon/). При клікі на стрілку вгору ⬆️, кулька повинна надуватися (збільшуватися) на 10 відсотків, а при клікі на стрілку вниз ⬇️, повинна здуватися (зменшуватися) на 10 відсотків.
Контролювати розмір тексту (emoji - текст) можливо за допомогою властивості CSS - розмір шрифту (style.fontSize) на його батьківському елементі. Не забуваючи включати одиниці виміру у значення - наприклад, пікселі (10px).
Значення властивості event.key для клавіш зі стрілками - ArrowUp і ArrowDown. Переконайтеся, що клавіші змінюють тільки розмір кульки, не прокручуючи сторінку.
Далі доробить програму наступним чином, якщо кулька надується до певного розміру, то вона вибухне. Тобто потрібно замінити емоджи кульки (balloon 🎈) на емоджи вибуху 💥 (https://emojipedia.org/collision-symbol/). При цьому потрібно видалити обробник події (вибух не може надуватися або здуватися)
Підказка
<body>
<p id="balloon">🎈</p>
<script>
// код буде тут
</script>
</body>
Для елементу кульки встановимо початковий розмір шрифту, наприклад, 40px.
const balloon = document.getElementById("balloon");
let size = 40;
balloon.style.fontSize = `${size}px`;
Додаємо слухач події "keydown" на все активне вікно (window). У події є властивість event.key, яка вказує, яку клавішу натиснули.
function handleKey(event) {
if (event.key === "ArrowUp") {
// збільшити розмір
} else if (event.key === "ArrowDown") {
// зменшити розмір
}
event.preventDefault(); // щоб сторінка не прокручувалася
}
window.addEventListener("keydown", handleKey);
<aside> ⚠️
Метод event.preventDefault() відміняє стандартну дію браузера, яка зазвичай відбувається після натискання певної клавіші або події.
</aside>