Lord of the Rings (Vanilla JS)

Learning Objectives

• Practice using Vanilla JS 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.

Setup

1. You will be writing your answers inside the app.js file located in the folder from this repo: js/app.js
2. Open the index.html file in your browser to test your work. Test every function as you go. Many of the functions require multiple steps-you should probably even test the individual steps as you go.

Resources

1. Inside this repo you'll find our usual folder structure plus some images and fonts. Except when specifically directed to, do not edit the CSS file. It adds some structure and style to your homework and will help you see if things are working! However, as mentioned, you will be doing a tiny bit of work in the CSS file once you get to Chapter 9.
2. You will be coding in the app.js file. The speu
3. You should not touch the HTML file.

Directions

1. Open the app.js file in your text editor.
2. Observe the arrays of people and places and the 12 chapters that have been included.

4. You will 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.

Workflow

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 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 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 AFTER COMPLETING EACH FUNCTION and ensuring that is working properly

Notes

The first couple of questions have lot of information and suggestions about how to do things. But after that, we leave you with more high-level instructions. We might not explicitly tell you to append things or use a loop, so you’ll have to think through what makes sense...

• Should I add an id or a class?
• Should I use a loop?

Also remember: Are you appending everything correctly? If you're sure you created it right but you forgot to append, that might be why it's not showing up!

Again you should make sure each problem works for moving on but feel free to go back and add classes or id’s if they’re helpful...say, for example, if you realize it would have been helpful to add a buddy class to each of your buddy lis or a hobbit class to each of your hobbit lis, etc, it’s totally fine to go back and do it if it helps you solve that question more easily.

Note: In Chapter 8 — When you've completed the problem it will look the same — you’ll have to check your Elements tab in chrome to see that it worked.

One More Note: Each function has a console.log() in it simply so that you can see that it is being called, to help you with debugging, feel free to delete them, but hey! in general, in life, remember that adding console.log()s to check that the things that are happening should be happening can save you hours of agony.

===

Resources

• DOM Reference
• DOM Cheatsheet