Hi. Any assessment would be appreciated.
In Events 3 I’m sure there must be simpler way than mine. Also in Events 2 I wanted to make the circle only be able to move within the canvas. Any suggestion would be highly regarded.
Thank you for your review and have a good day!
Hey Harry,
First two, looks good.
The third one, was a bit of a complicated way of reaching round and scratching your own back…
I have wrote this for you, CodePen .
If I was to add another button to the DOM it wouldnt apply the same functionality to the new button as the previous buttons. unless you added in another line
buttons[4].onclick=function(){//does stuff};
...buttons[n]
You are also repeating alot of the smae functionality which means it can be simplified down to a single function. remember simple > complex, flat > nested (Zen of Python, but it applies)
So you can refactor your existing code into a single function that handles an event, as an argument that can then passed directly into the function.
The docs on Events , breaks down the event methods and what you can do with them.
Also good to know that:
Creates an Event object, returning it to the caller.
So the event.target lets us reference the individual object that the event has been triggered on. From here we can call .getAttribute('data-color') this would give us what ever attribute we put in the HTML tag. we can put in rgba() hsl() #hex etc to set the color by setting it to the element’s css background color property.
this way we can add more entries to the DOM, and have the same affect apply to it.
Hope that it helps,
=)
any time man, I hope you keep up the good work man.
