Wk6 HW Part 1: Create character cards with Image CSS and DOM Manipulation (Total Points: 50)

In this weeks assignment you will creating some character cards on a web page. These character cards can be similar to a baseball card, Magic The Gathering Card, or a Pokemon card. It is your choice and anything is fair game.

Requirements:

• Use an external CSS & JS file, no internal or inline styles & scripts
  • Please comment your JS to break down your understanding of what is happening
• Create at least 3 character card elements (div's would work fine)
  • Each card needs to have an image, a description paragraph, and 3 other text elements in a list (examples: Age, Height, Element, Weakness, Level etc.)
  • Cards and their images must be the same size and dimensions.
  • Cards should have an appropriate style for their content and easy to read.
• CSS Background Images and Border Images need to be use somewhere on the page. A good idea might be to use them on a page H1 title.
• Use JS to find each card element, then apply a class to each card element. They can all get the same class, the goal here is to make sure you understand how to find elements and add CSS classes dynamically
  • HINT: Use the classList (Links to an external site.) or setAttribute (Links to an external site.) properties and methods.
• Use JS to add a link element to the web page after the cards.
  • Set the href attribute to a link appropriate to your card content. For instance, if you made cards about Pokemon create a link to the Pokemon website.
  • SUPER HINT: createElement (Links to an external site.) and appendChild (Links to an external site.) should be very helpful
• Style your page
  • Font, color, spacing and layout should be intentional and not default for all other elements on the page
  • Use classes for styling
  • As always no CSS frameworks all custom creations from your original self