duplicate that information in HTML. However, you are not going to type the HTML, you are going to use JavaScript to programmatically create that information inside of the page.

HTML Requirements:

• Using the JavaScript DOM, create all of the information in one card (just one), and put it into the body of the HTML

• You must utilize at least one or more of the following types of HTML elements:

• Unordered list

• A table with at least two columns and at least two rows

• At least one image element referencing at least one image (try and find an interesting image or two to display within the page)

• Create a layout that roughly matches the layout in the cards (hint: tables, float, clear, grid layout, etc.)

CSS Requirements:

• Again, using JavaScript and the DOM, style the HTML and add the following types of styles:

• Image filters

• Image texture background inside of a container (or two)

• Two different fonts (but no more than three) try to find fonts that match the Dungeons and Dragons style!

• Layout that closely matches the layouts found in the cards!

Important notes

Here are some important notes about this lab exercise:

• This document does not have to be responsive

• You are constructing this document (i.e., the contents of the body) in JavaScript utilizing JavaScript DOM calls such as document.createElement(), p.innerHTML, and document.getElementByID()

• Your JavaScript creates the HTML not you!

• All of your CSS style has to be done using the style property of your DOM element object

• E.g., var p1 = document.createElement(p); p1.style.backroundColor = #AABBCC;

• Do not use CSS style in the style element at the top again you are programmatically writing this.

HUMAN WANDERER 132 POINTS CG LEVEL MELEE ATTACK (SAVE) +17/+12 (15 magic/15) IO RANGED ATTACK +12 (10) SPEED TYPE 6 Humanoid (Human) SPECIAL ABILITIES AC Scout 22 Independent Knight of the Road (This creature has attack +2 if no allies HP are adjacent) Melee Sneak Attack +5 135 Improved Mobility (18 AC against attacks of opportunity) Dual Activation (Can take 2 turns in each round; each turn counts as 1 of your activations in that phase) DUNGEONS & DRAGONS HUMAN WANDERER 132 POINTS CG LEVEL MELEE ATTACK (SAVE) +17/+12 (15 magic/15) IO RANGED ATTACK +12 (10) SPEED TYPE 6 Humanoid (Human) SPECIAL ABILITIES AC Scout 22 Independent Knight of the Road (This creature has attack +2 if no allies HP are adjacent) Melee Sneak Attack +5 135 Improved Mobility (18 AC against attacks of opportunity) Dual Activation (Can take 2 turns in each round; each turn counts as 1 of your activations in that phase) DUNGEONS & DRAGONS