GigaXXIV / lotr

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Lord of the Rings

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.

Getting Started

  1. Fork this repo and git clone it down to your computer
  2. Open index.html in your browser
  3. Write your answers in fellowship.js
  4. When you're finished or when time is up, push your work to your remote repo, and file a Pull Request

  1. You should have an index.html file and a style.css file that will add some structure and style to this exercise.
  2. You will be coding in the fellowship.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.

Directions

  1. Open the fellowship.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 at the bottom of fellowship.js.
  4. Your job is to fill in the code inside the JS functions to get the application working as intended.

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

Workflow

Tackle this one function at a time in order 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 manipulation 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!

  3. 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 you 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).

Commits

Commit your work after each function is complete and working properly


Did I Do It Right?

Provided below are just some screenshots showing you what your index.html should look like for some of the early chapters so you can be sure you're on the right track!

Make Middle Earth
Make Hobbits
Frodo has the ring
Baddies Added to Mordor
Buddies Added
Leave the Shire

About


Languages

Language:JavaScript 77.2%Language:CSS 16.5%Language:HTML 6.3%