Create a script to make the mouse-click interaction more visible to the viewer of the screen.




As you might already know, as you interact with a mouse, a person viewing your screen isn't ever able to tell when exactly you click the mouse, unless the click obviously triggers a reaction from the browser, or even better, there is a customized pointer set up.

In other words, during the click, the pointer stays the exact same — it doesn't change shape, it doesn't change color, nothing else gets displayed on the screen, just about nothing.

In this exercise, you have to make the mouse interaction clearly visible when watched by another viewer.

And here's how to make the interaction visible:

  • When the mouse button goes down, a light blue circle must be shown right at the point of contact of the mouse pointer.
  • Then with the mouse button still down, if the pointer is moved around, the circle must move alongside it.
  • Lastly, when the mouse button is released, the circle must disappear.

Note that at the press of the right button, the aforementioned behavior must be repeated, but with the circle's color orange instead of blue.

Here's how the final result should work.

Live Example


Note that your solution MUST NOT use CSS directly. That is, you must not use HTML classes in order to get the corresponding CSS applied, and must only use JavaScript. This doesn't obviously mean that you can't use CSS — that would've meant no styling at all!

In simpler words, you can only do the styling from within JavaScript.