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.
 
 
 
 
 
 

2.0 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 a div at the position of the mouse on the screen, setting its background to white and its class to circle

  • 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

  • Create a function setBox which sets a box with the class box in the center of the page ; when a circle is inside that box, it has to be purple (use the CSS global variable var(--purple) as background) ; once a circle enters the box, it is trapped inside and cannot go out of it anymore.

Hint: do not use operators like <= or =>, a circle has to be trapped strictly inside the box

Notions

Provided files

  • Check 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