Exercises: The DOM

No homepage is safe from the logo bandit!

Open up www.google.com in Chrome or Firefox, and open up the console.
Find the Google logo and store it in a variable.
Modify the source of the logo IMG so that it's a Yahoo logo instead.
Find the Google search button and store it in a variable.
Modify the text of the button so that it says "Yahooo!" instead.

var img = document.getElementById('hplogo');
img.width = 400;
img.src = 'http://www.logostage.com/logos/yahoo.GIF';
var button = document.getElementById('gbqfba');
button.innerHTML = 'Yahoooo!';

Cuz every webpage needs an "About" section.

Start with this HTML and save it as "aboutme.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.
Change the body style so it has a font-family of "Arial, sans-serif".
Replace each of the spans (nickname, favorites, hometown) with your own information.
Iterate through each li and change the class to "listitem". Add a style tag that sets a rule for "listitem" 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>
    .listitem {
      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').innerHTML = 'Pamela Fox';
   document.getElementById('favorites').innerHTML = '27';
   document.getElementById('hometown').innerHTML = 'Pasadena, CA';
   var items = document.getElementsByTagName('li');
   for (var i = 0; i < items.length; i++) {
      items[i].className = 'listitem';
   }
    
    var myPic = document.createElement('img');
    myPic.src = 'http://gotocon.com/dl/jaoo_aus2008/photos/speakers/Pamela_Fox.jpg';
    document.body.appendChild(myPic);
  </script>
</body>
</html>

Keep track of which books you read and which books you want to read!

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 the array of books from the previous exercise.
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.
Bonus: Use a ul and li to display the books.
Bonus: add a property to each book with the URL of the book cover, and add an img element for each book on the page.
Bonus: 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>

Exercises: The DOM

The Logo Hijack

About Me

The Book List