![]() |
2 years ago | |
---|---|---|
.. | ||
README.md | 2 years ago | |
mouse-trap.html | 4 years ago |
README.md
Mouse trap
Instructions
Develop a trap to capture the elements when the mouse is getting too close to the center of the page.
Create the following functions:
-
createCircle
: make it fire on every click on the page, and create adiv
at the position of the mouse on the screen, setting itsbackground
towhite
and its class tocircle
. -
moveCircle
: make it fire when the mouse moves, and get the last circle created and makes it move along with the mouse. -
setBox
: which creates a box with the classbox
in the center of the page. When a circle is inside that box, it has to be purple (use the CSS global variablevar(--purple)
as itsbackground
). Once a circle enters the box, it is trapped inside and cannot escape.
Hint: Be careful, a circle cannot overlap the box which has walls of
1px
. It has to be trapped strictly inside.
Provided files
Files
You only need to create & submit the JS file mouse-trap.js
; we're providing you the following file to download and test locally:
-
the HTML file mouse-trap.html to open in the browser, which includes:
- the JS script which will enable you to run your code.
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
Expected result
You can see an example of the expected result here