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
1 Reply
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