Possible sample output

ICT-4540 Homework 6


This exercise provides an opportunity to incorporate XML data into a web page via Javascript.

What to Hand In

Hand in the web page, the JavaScript, CSS, and other related files (perhaps XSLT).
Also, hand in screenshots from two browsers in different browser families to show compatibility.


  1. Embedding the Presidents
    1. Create a web page that shows presidents by century. Keep it simple!
    2. Load the USPresidents.xml through JavaScript. Leverage the ict4540min.js unless you are a JavaScript whiz!
    3. Append a div under body with an id representing the century it represents. Note that you can do this physically in the file, although it is possible to do this programmatically as well.
    4. For each century, include a heading of some sort that names the century, and include the count of Presidents for that century.
    5. Place the result for each century in the correct div. Use the document.getElementById to find the right div (or create it on the fly).
    6. The year the President came to office, the year the President left office, the President's party, should be displayed
    7. Use CSS only to style the display attractively.
    8. Optional: The party affiliation should color the text or background of the table cell (or row, if you prefer) for that President.
  2. Optional: Perform the same action as in Problem I, but use the JSON data source instead of the XML data source. Be sure to use the DOM's Javascript API to add the elements and attributes to the DOM.



Criteria Weight
Web page 25%
XPath expressions 25%
CSS 25%
Output and display captures 25%
JSON usage +25%