diff --git a/subjects/build-brick-and-break/README.md b/subjects/build-brick-and-break/README.md index d90b8484..9af6f051 100644 --- a/subjects/build-brick-and-break/README.md +++ b/subjects/build-brick-and-break/README.md @@ -2,43 +2,41 @@ ### Instructions -Today, your mission is to build a 3-column brick tower, maintain it and finally break it! +Today, your mission is to build a 3-column brick tower, maintain it and finally break it. -- Create a function `build` which will create and display the given amount of bricks passed as argument: +- Create a function `build` which will create and display the amount of bricks passed as argument: - - each brick has to be created as a `div` and added to the page at a regular interval of 100ms, - - each brick will receive a unique `id` property, like following: + - each brick has to be created as a `div` and added to the page at a regular interval of 100ms. + - each brick will receive a unique `id` property, like the following: ```html
``` - - each brick in the middle column has to be set with the custom data attribute `foundation` receiving the value `true` + - each brick in the middle column has to be set with the custom data attribute `foundation`, receiving the value `true`. - Each one of the two emojis in the top-right corner fires a function on click: - - - 🔨 triggers the function `repair`: write the body of that function, which receives any number of `ids`, and for each `id`, retrieves the HTML element and set a custom attribute `repaired` set to `in progress` if it is a brick situated in the middle column, and `true` if not - - 🧨 triggers the function `destroy`: write the body of that function, which removes the current last brick in the tower - -### Notions - -- [`createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) -- [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) -- [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) -- [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) / [`clearInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) -- [`hasAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute) -- [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset) / [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) -- [`remove()`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove) + - 🔨: triggers the function `repair`. Write the body of that function. It receives any number of `ids`. For each `id`, it retrieves the HTML element, and sets the `repaired` custom attribute to `in progress` if it is a brick situated in the middle column, and `true` if not. + - 🧨: triggers the `destroy` function. Erite the body of that function. It removes the current last brick in the tower. ### Files -You only need to create & submit the JS file `build-brick-and-break.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 `build-brick-and-break.js`, We're providing you the following file to download and test locally: -- the HTML file [build-brick-and-break.html](./build-brick-and-break.html) to open in the browser, which includes: - - - the JS script running some code, and which will also allow to run yours - - some CSS pre-styled classes: feel free to use those as they are, or modify them +- the HTML file [build-brick-and-break.html](./build-brick-and-break.html) can be opened in the browser, which includes: + - the JS script running some code, and 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/OjSP_7u9CZ4) + +### Notions + +- [createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) +- [append](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) +- [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) +- [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) / [clearInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) +- [hasAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute) +- [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset) / [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) +- [remove](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)