No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

GA Cog

Lord of the Rings


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.


  1. You will be writing your answers inside the app.js file located in the folder from this repo: lotr_homework/js/app.js
  2. Open the index.html file in your browser to test your work. It is located at: lotr_homework/index.html


  1. Inside the folder lotr_homework folder are an index.html file and an a style.css sheet that will add some structure and style to your homework.
  2. You will be coding in the app.js file.
  3. You will be doing a tiny bit of work in the CSS file once you get to Chapter 9.
  4. You should not touch the HTML file.


  1. Open the app.js file in your text editor.
  2. Observe the arrays of people and places and the 13 chapters that have been included.
  3. Note that each chapter has a button in your browser with a click handler attached in the html file, and an associated javascript function in app.js.
  4. Your job is to fill in the code inside the JS functions to get the application working as intended.

🐘 Remember that you can check your DOM tree in the Elements tab in the Chrome Console.


Tackle tonight's homework one function at a time from start to finish.

  1. When you begin, write a console.log inside of the function that you are working on to check that the event listener works when you click the associated button.

  2. Write the correct DOM manipulatory code inside the function and check that it works.

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

  1. Every time you refresh the browser, you will have to click the buttons one by one in order from the beginning to operate your application. (If really don't want the popups after you've completed a step, you can check to disable each popup and speed up the process of debugging).


Commit your work after each function is complete and working properly