WDI Fundamentals Unit 10
Your code is slowly but surely starting to become more robust. To better organize the code you've already written, as well as prepare for the code you will write, we'll now take the time to structure the program using functions. Plus, using what you've learned about iterating with loops, you'll also dynamically create your cards in your HTML.
For example, let's look at
document.createElement('div'), which creates an HTML
div element (a
div will come to visually represent a card in the browser).
documentis a readily available JS object with built-in properties and methods associated with it.
createElementis a method within the
In this case, we passed
createElement an argument of
'div', so a
div element is created. If you'd like, you can go ahead and run that line of code,
document.createElement('div'), in your browser's console to see it in action.
document object comes with other methods that help with the creation and manipulation of HTML and CSS. For example, there is an attribute (or property) you can modify to add a class to an element —
className. If you need to modify the content inside of the HTML tags, you may modify the attribute named
innerHTML. If you modified the
innerHTML of an
li element to equal 'remember maple syrup at the grocery store', your list item would then contain
<li>remember maple syrup at the grocery store</li>. On top of the methods and attributes that allow you to construct an element, there's also the method
appendChild that attaches your element as a child of another element on your web page.
To complete this assignment, you will need to utilize all of these methods.
Before you start, go ahead and comment out the
if statement from the last assignment. We'll work with it to finalize our memory game during the next unit.
1) Open your
index.html and look for your
div with a class of
board. We need to give this
2) Give your
div elements with the class
card in HTML. Comment out any
div with the
4) Save your changes!
5) Get an element with the
game-board and set it to a variable.
6) Assuming your memory card game consists of four cards, create a
for loop that creates an HTML element for each card. Each HTML element should be a
div and have the class
card (This will help when you add CSS).
7) Append each newly created card to the
div with the ID
8) Create a function called
9) Be sure to execute/fire your
createCards function so it runs!
10) Once you've done that, your cards will be created! Be sure to check your page in a web browser to verify that everything works as intended.
Once you're happy with your work, save your code and make a commit to your project's repository.
Setting an HTML tag's attributes:
<article id="trogdor" class="burninating"></article>
id and setting it as equal to a variable:
Creating elements and modifying their attributes:
// create a section element... <section></section> var strongbadia = document.createElement('section'); // add a class... <section class='blue-skies'></section> strongbadia.className = 'blue-skies'; // append the area to a world element (maybe a div somewhere?) // <div> // <section class='blue-skies'></section> // </div> world.appendChild(strongbadia);