JavaScript 1. When the user places their cursor over the circle, the circle starts inflating (increasing its radius), its color changes to orange and the text is changed to indicate that the circle is "Inflating..". 2. When the mouse moves out of the circle, the circle stops inflating, it returns to its original color, and the text returns to its original form. 3. When we click on the circle, the circle starts deflating (decreasing its radius), its color changes to brown, the text is changed to indicate that the circle is "Deflating..", and it does not stop deflating until it reverts to its original size. While deflating, the circle does not react to the mouse hovering, entering or leaving the circle (does not inflate). When the deflating is finished, the program is reverted to its starting state (circle returns to its original color, and the text returns to its original form).
JavaScript
1. When the user places their cursor over the circle, the circle starts inflating (increasing its radius), its color changes to orange and the text is changed to indicate that the circle is "Inflating..".
2. When the mouse moves out of the circle, the circle stops inflating, it returns to its original color, and the text returns to its original form.
3. When we click on the circle, the circle starts deflating (decreasing its radius), its color changes to brown, the text is changed to indicate that the circle is "Deflating..", and it does not stop deflating until it reverts to its original size. While deflating, the circle does not react to the mouse hovering, entering or leaving the circle (does not inflate). When the deflating is finished, the program is reverted to its starting state (circle returns to its original color, and the text returns to its original form).
Step by step
Solved in 4 steps with 3 images
