From a912624febd7c3cd7c8e68e7769634032e40fb0d Mon Sep 17 00:00:00 2001 From: davhojt Date: Thu, 16 Jun 2022 18:10:29 +0300 Subject: [PATCH] docs(mouse-trap): correct grammar --- subjects/mouse-trap/README.md | 35 ++++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/subjects/mouse-trap/README.md b/subjects/mouse-trap/README.md index 46b801e3..e4d6731a 100644 --- a/subjects/mouse-trap/README.md +++ b/subjects/mouse-trap/README.md @@ -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)