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
const body = document.querySelector('body');
body.style.fontFamily = 'Trebuchet MS, sans-serif';
body.style.fontSize = '10pt';
body.style.color = '#000033';
body.style.background = '#69f';
body.style.margin = '0px';
// 2) Add the .page-wrapper class
let pageWrap = document.querySelector('div');
pageWrap.classList.add('page-wrapper');

// 3) Add the .summary class
let summary = document.querySelector('div#zen-summary');
summary.classList.add('summary');

// 4) Add the .sidebar class
let sidebar = document.querySelector('aside');
sidebar.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"
    },
];
let rL = document.querySelector('#resourceList');
// let li = '<li href="' + resources[i].href + '" title="' // + resources[i].title + '">' + resources[i].innerHTML + // '</li>';
for (i=0; i<resources.length; i++){
    rL.innerHTML += '<li title="' + resources[i].title + '"> <a href="' + resources[i].href + '">' + resources[i].innerHTML + '</a></li>';
    console.log(i);
}
console.log(resources);