mirror of https://github.com/01-edu/public.git
docs(mouse-trap): correct grammar
This commit is contained in:
parent
4cdc68b6e2
commit
a912624feb
|
@ -2,34 +2,39 @@
|
|||
|
||||
### Instructions
|
||||
|
||||
Develop a trap to capture the elements when the mouse is getting too close to the center of the page!
|
||||
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 the following functions:
|
||||
- `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
|
||||
- `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.
|
||||
- `setBox`: which creates 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 its `background`). 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.
|
||||
|
||||
### Notions
|
||||
|
||||
- [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener): `click`, `mousemove`
|
||||
- [`removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
|
||||
- [Mouse event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent): [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event), [`mousemove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event) / [`clientX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), [`clientY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
|
||||
- [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
|
||||
> 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 (click right and save link) & test locally:
|
||||
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](./mouse-trap.html) to open in the browser, 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
|
||||
- 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](https://youtu.be/qF843P-V2Yw)
|
||||
|
||||
### Notions
|
||||
|
||||
- [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
|
||||
- [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
|
||||
- [Mouse event](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent)
|
||||
- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
|
||||
- [mousemove](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event)
|
||||
- [clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
|
||||
- [clientY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)
|
||||
- [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
|
||||
|
|
Loading…
Reference in New Issue