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.3 KiB

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

Provided files

You have at your disposal the following file that you can download to test locally:

  • the HTML file index.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