Kevin Powell - Community•2y ago

balloon we grow and change the background by click

Hi everyone I m a beginner on javascript I want build a balloon we should grow on every click of 10px and the background will change to red==>green==>blue after red==>green==>blue can I get some idea about how to make it? thanks. https://codepen.io/alpha_66/pen/wvQQpoK nb:don't ask a code need some information

Patrick L

CodePen

wvQQpoK

...

1 Reply

Joao•2y ago

It all starts with adding an event listener that reacts to "click" events. Then, you provide a function that will select the balloon and change it's style. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Since this is a rather dynamic change, it doesn't really make sense to use classes for this. Instead, read the current width and height value of the element on every click and increase the amount by X pixels. The trick is that you will get a result as a string, something like "20px". You need to be able to extract only the number to that you can perform arithmetic operations on it, and then cast it back into a string. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/split https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals The final piece is to have a set of colors stored inside an array, and an index variable so that you can keep track of which color you are currently using and which one should come next, by incrementing the index variable by one. Eventually, you will reach the end of the array but you can use the modulus or remainder operator % to loop around the value of the index value so that it never goes beyond the length of the array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder

const balloon = document.querySelector('.balloon');
const colors = ['red', 'green', 'blue'];
let colorIdx = 0;

balloon.addEventListener('click', function(e) {
  // read balloon's properties

  // increase width and height

  // update balloon's properties

  // increase colorIdx
});

const balloon = document.querySelector('.balloon');
const colors = ['red', 'green', 'blue'];
let colorIdx = 0;

balloon.addEventListener('click', function(e) {
  // read balloon's properties

  // increase width and height

  // update balloon's properties

  // increase colorIdx
});

Gaming

Programming

balloon we grow and change the background by click