\nExercise 10
\nFor this exercise, start with the the provided HTML page. You will create the JavaScript code to make it work as follows
\nClickable Blocks
\nIn the first container (id=\u201dsvg1\u2033), create a 200 200 SVG Paper object.
\nWhen the user types a number in the text input and clicks the Add More button, we will add that number of squares to the SVG. That will require getting the value from the input, and using it as the limit of a for loop.
\nTo make things a little more interesting, we will add the blocks in random positions. The built-in Math.random() function will give us a random number between 0 and 1 every time we call it. Here is some code to add one rectangle:
\nx = Math.random() * 180
\ny = Math.random() * 180
\nr = paper.rect(x, y, 20, 20)
\nfilled = {
\n \u2018fill\u2019: \u2018#ddf\u2019
\n}
\nr.attr(filled)
\nShapes created by Rapha l have many of the same events as jQuery elements. In particular, you can do something when a shape is clicked by calling r.click(disappear) (assuming you have a function disappear defined).
\nIn the handler function, the special variable this holds the shape that was clicked on. The Rapha l .remove() function can make it disappear. Use this function as the squares\u2019 click handler:
\ndisappear = function() {
\n this.remove()
\n}
\n(The code above creates the squares with a fill: if they don\u2019t have a fill colour, then only the outlines are clickable, which is vary hard to trigger.)
\nSpin Them
\nWhen the squares appear (in the previous part), we want them to look a little more interesting. When they appear, start an animation to have them spin in a random way.
\nUse Math.random() to create a random value from -720 to 720, which represents spinning up to two full rotations in either direction. (Hint: multiply by 1440 and subtract 720.)
\nOnce you have the angle, you can build a transform string from it: the result should be like \u2018r123\u2019, depending on the angle you generate. Animate that transform on the square.
\nVideo: Exercise 10 behaviour
\nExpanding Circles
\nIn the second container (id=\u201dsvg2\u2033), create another 200 200 SVG Paper object.
\nEach time the Add Another button is clicked, a circle should be drawn on the image. The first should have radius 10, then 20, 30, 40, .<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
Exercise 10 For this exercise, start with the the provided HTML page. You will create the JavaScript code to make it work as follows Clickable Blocks In the first container (id=\u201dsvg1\u2033), create a 200 200 SVG Paper object. When the Read More …<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-94772","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/posts\/94772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/comments?post=94772"}],"version-history":[{"count":0,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/posts\/94772\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/media?parent=94772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/categories?post=94772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benedictsol.com\/blogs\/wp-json\/wp\/v2\/tags?post=94772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}