forked from root/public
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.
|
3 years ago | |
---|---|---|
.. | ||
README.md | 3 years ago | |
build-brick-and-break.html | 4 years ago |
README.md
Build brick and break
Instructions
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:- 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:
<div id="brick-1"></div>
- each brick in the middle column has to be set with the custom data attribute
foundation
receiving the valuetrue
- each brick has to be created as a
-
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 ofids
, and for eachid
, retrieves the HTML element and set a custom attributerepaired
set toin progress
if it is a brick situated in the middle column, andtrue
if not - 🧨 triggers the function
destroy
: write the body of that function, which removes the current last brick in the tower
- 🔨 triggers the function
Notions
createElement()
append()
- Element
setInterval()
/clearInterval()
hasAttribute()
- dataset /
data-*
remove()
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:
-
the HTML file 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
Expected result
You can see an example of the expected result here