mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.8 KiB
1.8 KiB
Mouse trap
Instructions
Develop a trap to capture the elements when the mouse is getting too close to the center of the page!
-
Create a function
createCircle: make it fire on every click on the page, and create adivat the position of the mouse on the screen, setting itsbackgroundtowhiteand its class tocircle -
Create a function
moveCircle: make it fire when the mouse moves, and get the last circle created and makes it move along with the mouse -
Set a box in the center of the page ; when a circle is inside that box, it has to be purple ; once a circle enters the box, it is trapped inside and cannot go out of it anymore.
Notions
addEventListener():click,mousemoveremoveEventListener()- Mouse event:
click,mousemove/clientX,clientY getBoundingClientRect()
Provided files
-
Use the HTML file index.html, which includes:
- the JS script which will allow 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