Exercise: Advanced DOM Manipulation

Create a webpage with an h1 of "My Book List".
Add a script tag to the bottom of the page, where all your JS will go.

Copy this array of books:

    var books = [
      {
        title: 'The Design of EveryDay Things',
        author: 'Don Norman',
        alreadyRead: false
      }, {
        title: 'The Most Human Human',
        author: 'Brian Christian',
        alreadyRead: true
      }
    ];

Iterate through the array of books. For each book, create a p element with the book title and author and append it to the page.
Bonuses:
- Use a ul and li to display the books.
- Add an img to each book that links to a URL of the book cover.
- Change the style of the book depending on whether you have read it or not.

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8"/>
      <title>Book List</title>
     </head>
    <body>

    <h1>My Book List</h1>
    <script>
    var books = [
      {title: 'The Design of EveryDay Things',
       author: 'Don Norman',
       alreadyRead: false
      },
      {title: 'The Most Human Human',
       author: 'Brian Christian',
       alreadyRead: true
      }];

    for (var i = 0; i < books.length; i++) {
      var bookP = document.createElement('p');
      var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
      bookP.appendChild(bookDescription);
      document.body.appendChild(bookP);
    }



    // OR, with the bonuses:
    var books = [
      {title: 'The Design of EveryDay Things',
       img: 'http://ecx.images-amazon.com/images/I/41j2ODGkJDL._AA115_.jpg',
       author: 'Don Norman',
       alreadyRead: false
      },
      {title: 'The Most Human Human',
       img: 'http://ecx.images-amazon.com/images/I/41Z56GwEv9L._AA115_.jpg',
       author: 'Brian Christian',
       alreadyRead: true
      }];

    var bookList = document.createElement('ul');
    for (var i = 0; i < books.length; i++) {
      var bookItem = document.createElement('li');
      var bookImg = document.createElement('img');
      bookImg.src = books[i].img;
      bookItem.appendChild(bookImg);
      var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
      bookItem.appendChild(bookDescription);
      if (books[i].alreadyRead) {
        bookItem.style.color = 'grey';
      }
      bookList.appendChild(bookItem);
    }
    document.body.appendChild(bookList);
    </script>

    </body>
    </html>

Start with this HTML and save it as "about_me.html":

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8"/>
      <title>About Me</title>
    </head>
    <body>
      <h1>About Me</h1>

      <ul>
        <li>Nickname: <span id="nickname"></span>
        <li>Favorites:  <span id="favorites"></span>
        <li>Hometown: <span id="hometown"></span>
      </ul>
    </body>
  </html>

Add a script tag to the bottom of the HTML body.
(In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
(In the JavaScript) Replace each of the spans (nickname, favorites, hometown) with your own information.
Iterate through each li and change the class to "list-item".
(In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
Create a new img element and set its src attribute to a picture of you. Append that element to the page.

  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="utf-8"/>
    <title>About Me</title>
    <style>
      .list-item {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>About Me</h1>

    <ul>
      <li>Nickname: <span id="nickname"></span>
      <li>Favorites:  <span id="favorites"></span>
      <li>Hometown: <span id="hometown"></span>
     </ul>

    <script>
     document.body.style.fontFamily = 'Arial, sans-serif';
     document.getElementById('nickname').textContent = 'Princess Bubblegum';
     document.getElementById('favorites').textContent = 'science, music, my candy subjects';
     document.getElementById('hometown').textContent = 'Candy Kingdom';
     var items = document.getElementsByTagName('li');
     for (var i = 0; i < items.length; i++) {
        items[i].className = 'list-item';
     }

      var myPic = document.createElement('img');
      myPic.src = 'https://upload.wikimedia.org/wikipedia/en/thumb/0/00/Princess_Bubblegum.png/100px-Princess_Bubblegum.png';
      document.body.appendChild(myPic);
    </script>
  </body>
  </html>

The Book List

About Me