posted Mar 8, 2017, 7:49 AM by JonAlf Dyrland-Weaver
updated Mar 10, 2017, 10:12 AM
- Create an html/js program with the following features
- An svg container
- 2 buttons, one labeled clear, the other labeled move
- Enable the following event listeners for the svg area
- Clicking on a blank section of the sag area should create a circle at that position
- Clicking on a circle once should change its color, no new circles should be added to the svg container
- Clicking on a circle a second time should remove the circle and add a new one to the svg container at a random location
- Don't put this all in a single event listener
- When the "move" button is clicked, the circles should start to move around the svg container, bouncing off the walls
- The other event listeners should still function as described above.
- NEW: When circles reach the middle of the svg container, a new circle should be added half the size of the original, going in the opposite direction of the original, and the original circle should decrease its size by half.
- When circles have a radius < 1, they should be removed from the page.
submit this in the workshop under svg-interactive