Lord of the Bling

A Trip To MorDOMr

Learning Objectives

• Practice using jQuery to manipulate the DOM

We are going to take a trip from the Shire, through Rivendell, across Middle Earth, and into the heart of Mordor itself, Mount Doom. Pack up, because we're going on an adventure.

Step 1-13

Observe the 13 chapters that have been included in the starter code. Each chapter has a button in the html file, and an associated javascript function in app.js. Your job is to fill in the right code into the JS functions, and hook up event listeners to the buttons to execute the right functions on the right button clicks.

Workflow

Tackle this problem one function from start to finish at a time.

• Set up the right event listener
• Write a trivial console.log inside the function to check that the event listener works
• Write the correct DOM manipulatory code inside the function and check that it works

Each function depends on the previous ones, so make sure your function works before moving on to the next one!

Every time you refresh the page, you will have to click the buttons one by one in order from the beginning to operate your application.

Step 14

Add an click event listener on all hobbits and hook it up to the itWhispers function. This function should turn the hobbitses goldenrod. Nasty hobbitses.

Where should you add the code to configure these event listeners?

###Step 15

Add a button to the DOM, give it an id of bling. Add a click event to this button that will append an img to the page with a source of http://images4.fanpop.com/image/photos/18600000/The-Lord-of-the-Bling-movies-18669429-590-880.jpg