Arizona State University Using an external CSS & JS file Exam Practice

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. Please put your name in your code.
• Create at least 3 character card elements (div’s would work fine)
  • Each card needs to have an image, a description paragraph, and 3other 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 onthe 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 cardelement. They can all get the same class, the goal here is to make sureyou 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 thePokemon 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
• Confirm that the code is properly indented & formatted.
• Validate your code, there should be no errors
• Save your files on your system in a folder called HW6Part1
• Upload your folder and files to your ASU web space
• Submit your assignment using a link from your web host

Point Distribution:

1. JS Link Element= 10pts
2. Finding/Manipulating Card Element = 20pts
3. Background and Border Elements/Card Uniformity/Styling= 10pts
4. Content, look and feel of site. Site should look neat and clean. 10pts