WDI Fundamentals Unit 11
Make sure that you read the instructions carefully, as the instructions are a little different from past exercises.
In this challenge, we'll be using the
document object to create some abstract art. We'll be creating three elements of different dimensions and colors and then adding them to the DOM.
Are you ready?
ishould have an initial value of
1and the loop should run three times. Each time the loop runs, create a div element using the
createElement();method and store it in a variable
Alright! Next let's add some styles for each
div. In the CSS tab we've defined some styles for you to use. Each time the
for loop runs, we want to add a class to the current
boxElement using the
className property. This will apply the styles in our CSS that are associated with that class.
The class name for the third box should be
Hint: For the class name, we can use string concatenation to add the number to 'box-'. This will look like the following:
'box-' + i;
Also within the
for loop, use the
appendChild() method to append each
boxElement to the body.
After the third step, you should see the abstract art displayed in the "Output" panel. If you don't see anything, make sure the "Auto-run JS" checkbox is checked.
Stuck? Check out the solutions to see what you can do.