fix-the-page.js

/**
 * Use this javascript file to fix the page design and layout. 
 * Reference the index.html comments for complete details.
 */

// 1) Add CSS Properties to the body tag
let body = document.getElementById("css-zen-garden")
body.style.fontSize = "10pt/14pt";
body.style.backgroundColor = "#69f"; 
body.style.color = "#000033";
body.style.margin = "0px";

// 2) Add the .page-wrapper class
document.querySelector("div").classList.add("page-wrapper");

// 3) Add the .summary class
document.getElementById("zen-summary").classList.add("summary");

// 4) Add the .sidebar class
document.querySelector("aside").classList.add("sidebar");

// 5) Add these links to the "Resources" <ul>
let resources = [
    {
        title: "View the source CSS file of the currently-viewed design.",
        href: "css/style.css",
        innerHTML: "View This Design&#8217;s <abbr title=\"Cascading Style Sheets\">CSS</abbr>"
    },
    {
        title: "Links to great sites with information on using CSS.",
        href: "http://www.mezzoblue.com/zengarden/resources/",
        innerHTML: "<abbr title=\"Cascading Style Sheets\">CSS</abbr> Resources "
    },
    {
        title: "A list of Frequently Asked Questions about the Zen Garden.",
        href: "http://www.mezzoblue.com/zengarden/faq/",
        innerHTML: "<abbr title=\"Frequently Asked Questions\">FAQ</abbr> "
    },   
    {
        title: "Send in your own CSS file.",
        href: "http://www.mezzoblue.com/zengarden/submit/",
        innerHTML: "Submit a Design"
    },
    {
        title: "View translated versions of this page.",
        href: "http://www.mezzoblue.com/zengarden/translations/",
        innerHTML: "Translations"
    },
];

for (i = 0; i < resources.length; i++ ) {
    document.getElementById("resourceList").innerHTML += "<li><a href=" + resources[i].href + "title =" + resources[i].title + ">" + resources[i].innerHTML + "</a></li>";
}