fix-the-page.js

/**
 * Use this javascript file to fix the page design and layout. 
 * 
 * Rules:
 * 1) You may not modify the HTML file.
 * 2) You may not modify the CSS file.
 * 
 * You can begin by adding the classes mentioned in style.css to
 * their appropriate elements in the HTML file.
 */










 

/**
 * Here's the bad news: The resource links are missing from our HTML file.
 * The good news: They're here in our JS file as an array of objects.
 * 
 * 1) Use this array of objects to create new <a> tags and append them to a new <li>.
 * 2) Then take your new <li> and append it to ul#resourceList
 */
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 resourceList = document.querySelector('ul#resourceList')

resources.forEach(resource => {
    let listItem = document.createElement('li');
    let anchor = document.createElement('a');
    anchor.title = resource.title;
    anchor.innerHTML = resource.innerHTML;
    anchor.href = resource.href;
    listItem.appendChild(anchor);
    resourceList.appendChild(listItem);
});

let body = document.querySelector('body')
body.style.font = '10pt/14pt "Trebuchet MS", sans-serif'
body.style.color = '#000033'
body.style.background = '#69f'
body.style.margin = '0'

let pageWrapper = document.querySelector('body>div')
pageWrapper.className = 'page-wrapper'

let zenSummary = document.getElementById('zen-summary')
zenSummary.className = 'summary'

let sidebar = document.querySelector("aside[role='complementary']")
sidebar.className = 'sidebar'