changed things up

unit_01/w02d01/homework/lotr_homework/css/style.css

@@ -14,3 +14,8 @@ button {
   display: inline;
   margin: 12px;
 }
+
+.the-white {
+	background-color: white;
+	border: 1px solid grey;
+}

unit_01/w02d01/homework/lotr_homework/dom_functions.md

@@ -17,4 +17,10 @@
   * `node.innerText =`
   * `node.className = `
   * `node.classList.add`
-  * `node.setAttribute`
+  * `node.setAttribute`
+  * `node.id = `
+  * `node.style = `
+* Traversal
+  * `node.firstChild`
+  * `node.childNodes`
+  * `node.parentNode`

unit_01/w02d01/homework/lotr_homework/js/app.js

@@ -25,7 +25,7 @@ var baddies = [
 ];
 
 var lands = [
-  "The Shire",
+  "The-Shire",
   "Rivendell",
   "Mordor"
 ];
@@ -37,10 +37,15 @@ var lands = [
 var makeMiddleEarth = function() {
   console.log("Trying to make middle earth.");
   // create a section tag with an id of middle-earth
-  // add each land to the section as article tags-- try using a loop
+
-  // assign the id of the corresponding article tag as the name of the land 
-  // inside each article tag include an h1 with the name of the land
   // append the section to the body of the DOM with: document.body.appendChild( // variable name )
+
+  // use a for loop to iterate over the lands array that does the following:
+  //   1. creates an article tag (there should be one for each land when the loop is done)
+  //   2. gives each land article an `id` tag of the corresponding land name
+  //   3. includes an h1 with the name of the land inside each land article
+  //   4. appends each land to the middle-earth section
+
 };
 
 // COMMIT YOUR WORK
@@ -48,16 +53,25 @@ var makeMiddleEarth = function() {
 
 var makeHobbits = function() {
   console.log('Make hobbits');
-  // display an unordered list of hobbits in the shire
+  // display an unordered list of the hobbits in the shire.
   // give each hobbit a class of "hobbit"
+  // hint: create a 'ul' outside the loop upon which to append the 'li's
+  // hint: get 'The-Shire' by using its id
+
 };
 
 // COMMIT YOUR WORK
 // The commit message should read: "The 2nd set of homework answers is complete".
 
 var keepItSecretKeepItSafe = function() {
+
   // create an empty div with an id of 'the-ring'
   // add the ring as a child of Frodo
+  // hint: Frodo does not have an id, but there is a command to retrieve all elements 
+  // with a certain class. This should give you an array for you to access . . .
+
+  // when you think you have given Frodo the ring, check in your Elements tab
+
 };
 
 // COMMIT YOUR WORK
@@ -66,22 +80,27 @@ var keepItSecretKeepItSafe = function() {
 var makeBaddies = function() {
   // display an unordered list of baddies in Mordor
   // give each of the baddies a class of "baddy"
+
 };
 
 // COMMIT YOUR WORK
 // The commit message should read: "The 4th set of homework answers is complete".
 
 var makeBuddies = function() {
-  // create an aside tag and append it below mordor
+  // create an aside tag and append it to middle-earth below mordor
   // display an unordered list of buddies in the aside
   // give each of the buddies a class of "buddy"
+
 };
 
 // COMMIT YOUR WORK
 // The commit message should read: "The 5th set of homework answers is complete".
 
 var leaveTheShire = function() {
-  // grab the hobbits and move them to Rivendell
+  // grab the hobbits (the ul in which they reside) and move them to Rivendell
+  // hint: the hobbits ul is a childNode of The-Shire-- there is way to get a list
+  // of childNodes
+
 };
 
 // COMMIT YOUR WORK
@@ -89,17 +108,19 @@ var leaveTheShire = function() {
 
 var beautifulStranger = function() {
   // change the buddy 'Strider' textnode to "Aragorn"
+  // hint: You can get a list of elements by tag name, such as 'aside'
+
 };
 
 // COMMIT YOUR WORK
 // The commit message should read: "The 7th set of homework answers is complete".
 
 var forgeTheFellowShip = function() {
-  // move the hobbits and the buddies to Rivendell
+  // create a new div with an id 'the-fellowship'
-  // create a new div called 'the-fellowship'
   // add an h1 with the text 'The Fellowship' to this new div
-  // add each hobbit and buddy one at a time to 'the-fellowship'
+  // append the fellowship to middle-earth
-  // after each character is added make an alert that they have joined your party
+  // add the unordered lists of hobbits and buddies to 'the-fellowship'
+
 };
 
 // COMMIT YOUR WORK
@@ -110,6 +131,7 @@ var theBalrog = function() {
   // add a class "the-white" to this element
   // in the style.css, add a css rule to make elements of the class "the-white"
   // have a white background and a grey border
+
 };
 
 // COMMIT YOUR WORK
@@ -117,17 +139,19 @@ var theBalrog = function() {
 
 var hornOfGondor = function() {
   // pop up an alert that the horn of gondor has been blown
-  // Boromir's been killed by the Uruk-hai!
+  // Boromir's been killed by the Uruk-hai! Put a linethrough on Boromir's name
-  // put a linethrough on boromir's name
+  // Tricky: Remove the Uruk-Hai from the Baddies on the page
-  // Remove the Uruk-Hai from the Baddies on the page
+
 };
 
 // COMMIT YOUR WORK
 // The commit message should read: "The 10th set of homework answers is complete".
 
 var itsDangerousToGoAlone = function(){
-  // take Frodo and Sam out of the fellowship and move them to Mordor
+  // take Frodo and Sam out of the fellowship and move them to Mordor (they don't
+  // need to be inside a ul in Mordor)
   // add a div with an id of 'mount-doom' to Mordor
+
 };
 
 // COMMIT YOUR WORK
@@ -135,8 +159,9 @@ var itsDangerousToGoAlone = function(){
 
 var weWantsIt = function() {
   // Create a div with an id of 'gollum' and add it to Mordor
-  // Remove the ring from Frodo and give it to Gollum
+  // Move the ring from Frodo and give it to Gollum
   // Move Gollum into Mount Doom
+
 };
 
 // COMMIT YOUR WORK
@@ -146,6 +171,7 @@ var thereAndBackAgain = function() {
   // remove Gollum and the Ring from the document
   // remove all the baddies from the document
   // Move all the hobbits back to the shire
+
 };
 
 // COMMIT YOUR WORK

unit_01/w02d01/homework/lotr_solutions/css/style.css

@@ -0,0 +1,21 @@
+body {
+  background: url('http://www.lord-of-the-rings.org/collections/maps/map10[1].jpg');
+  /*color: white;*/
+  font-size: 24px;
+  text-shadow: 1px 1px white;
+  font-weight: 800;
+}
+
+h1 {
+  font-family: 'Condiment', cursive;
+}
+
+button {
+  display: inline;
+  margin: 12px;
+}
+
+.the-white {
+	background-color: white;
+	border: 1px solid grey;
+}

unit_01/w02d01/homework/lotr_solutions/dom_functions.md

@@ -0,0 +1,26 @@
+## DOM function reference.
+
+### For more information search for the MDN reference page for the function.
+
+* Access
+  * `document.getElementById`
+  * `document.getElementsByClassName`
+  * `document.getElementsByTagName`
+  * `document.querySelector`
+  * `document.querySelectorAll`
+* Addition and removal
+  * `document.createElement`
+  * `node.appendChild`
+  * `node.removeChild`
+  * `node.remove`
+* Editing
+  * `node.innerText =`
+  * `node.className = `
+  * `node.classList.add`
+  * `node.setAttribute`
+  * `node.id = `
+  * `node.style = `
+* Traversal
+  * `node.firstChild`
+  * `node.childNodes`
+  * `node.parentNode`

unit_01/w02d01/homework/lotr_solutions/index.html

@@ -0,0 +1,25 @@
+<html>
+  <head>
+    <title>Lord Of The Rings</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
+    <script src="js/app.js"></script>
+  </head>
+  <body>
+    <h1>Lord Of The Rings</h1>
+    <button id="1">Make Middle Earth</button>
+    <button id="2">Make Hobbits</button>
+    <button id="3">Keep It Secret, Keep It Safe</button>
+    <button id="4">Make Baddies</button>
+    <button id="5">Make Buddies</button>
+    <button id="6">Leave The Shire</button>
+    <button id="7">Beautiful Stranger</button>
+    <button id="8">Forge The Fellowship</button>
+    <button id="9">The Balrog</button>
+    <button id="10">Horn Of Gondor</button>
+    <button id="11">It's Dangerous To Go Alone</button>
+    <button id="12">We Wants It</button>
+    <button id="13">There And Back Again</button>
+    <br>
+  </body>
+</html>

unit_01/w02d01/homework/lotr_solutions/js/app.js

@@ -0,0 +1,307 @@
+// ==============================
+//       Dramatis Personae
+// ==============================
+
+var hobbits = [
+  "Frodo Baggins",
+  "Samwise 'Sam' Gamgee",
+  "Meriadoc 'Merry' Brandybuck",
+  "Peregrin 'Pippin' Took"
+];
+
+var buddies = [
+  "Gandalf the Grey",
+  "Legolas",
+  "Gimli",
+  "Strider",
+  "Boromir"
+];
+
+var baddies = [
+  "Sauron",
+  "Saruman",
+  "The Uruk-hai",
+  "Orcs"
+];
+
+var lands = [
+  "The-Shire",
+  "Rivendell",
+  "Mordor"
+];
+
+// ====================================
+//           Chapters
+// ====================================
+
+var makeMiddleEarth = function() {
+  console.log("Trying to make middle earth.");
+  // create a section tag with an id of middle-earth
+
+  var section = document.createElement('section');
+  section.setAttribute('id', 'middle-earth');
+
+  // append the section to the body of the DOM with: document.body.appendChild( // variable name )
+  document.body.appendChild(section);
+
+  // use a for loop to iterate over the lands array that does the following:
+  //   1. creates an article tag (there should be one for each land when the loop is done)
+  //   2. gives each land article an `id` tag of the corresponding land name
+  //   3. includes an h1 with the name of the land inside each land article
+  //   4. appends each land to the middle-earth section
+  for (var i=0; i < lands.length; i++) {
+    var article = document.createElement('article');
+    article.setAttribute('id', lands[i]);
+    article.innerHTML = '<h1>' + lands[i] + '</h1>';
+    section.appendChild(article);
+  }
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 1st set of homework answers is complete".
+
+var makeHobbits = function() {
+  console.log('Make hobbits');
+  // display an unordered list of the hobbits in the shire.
+  // give each hobbit a class of "hobbit"
+  // hint: create a 'ul' outside the loop upon which to append the 'li's
+  // hint: get 'The-Shire' by using its id
+
+  var hobbitList = document.createElement('ul');
+  for (var i=0; i < hobbits.length; i++) {
+    var hobbit = document.createElement('li');
+    hobbit.innerText = hobbits[i]
+    hobbit.className += "hobbit";
+    hobbitList.appendChild(hobbit);
+  }
+  var shire = document.getElementById('The-Shire');
+  shire.appendChild(hobbitList);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 2nd set of homework answers is complete".
+
+var keepItSecretKeepItSafe = function() {
+
+  // create an empty div with an id of 'the-ring'
+  // add the ring as a child of Frodo
+  // hint: Frodo does not have an id, but there is a command to retrieve all elements 
+  // with a certain class. This should give you an array for you to access . . .
+
+  // when you think you have given Frodo the ring, check in your Elements tab
+
+  var ring = document.createElement('div');
+  ring.setAttribute('id', 'the-ring');
+  var frodo = document.getElementsByClassName('hobbit')[0];
+  frodo.appendChild(ring);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 3rd set of homework answers is complete".
+
+var makeBaddies = function() {
+  // display an unordered list of baddies in Mordor
+  // give each of the baddies a class of "baddy"
+
+  var baddiesList = document.createElement('ul');
+  for (var i=0; i < baddies.length; i++) {
+    var baddy = document.createElement('li');
+    baddy.innerText = baddies[i];
+    baddy.className = "baddy";
+    baddiesList.appendChild(baddy);
+  }
+
+  var mordor = document.getElementById('Mordor');
+  mordor.appendChild(baddiesList);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 4th set of homework answers is complete".
+
+var makeBuddies = function() {
+  // create an aside tag and append it to middle-earth below mordor
+  // display an unordered list of buddies in the aside
+  // give each of the buddies a class of "buddy"
+
+  var aside = document.createElement('aside');
+
+  var buddiesList = document.createElement('ul');
+  for (var i=0; i < buddies.length; i++) {
+    var buddy = document.createElement('li');
+    buddy.innerText = buddies[i];
+    buddy.className = "buddy";
+    buddiesList.appendChild(buddy);
+  }
+
+  aside.appendChild(buddiesList);
+  var middleEarth = document.getElementById('middle-earth');
+  middleEarth.appendChild(aside);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 5th set of homework answers is complete".
+
+var leaveTheShire = function() {
+  // grab the hobbits (the ul in which they reside) and move them to Rivendell
+  // hint: the hobbits ul is a childNode of The-Shire-- there is way to get a list
+  // of childNodes
+  var hobbits = document.getElementById("The-Shire").childNodes[1];
+  var rivendell = document.getElementById('Rivendell');
+  rivendell.appendChild(hobbits);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 6th set of homework answers is complete".
+
+var beautifulStranger = function() {
+  // change the buddy 'Strider' textnode to "Aragorn"
+  // hint: You can get a list of elements by tag name, such as 'aside'
+  var aside = document.getElementsByTagName('aside')[0];
+  var strider = aside.firstChild.childNodes[3];
+  strider.innerText = "Aragorn";
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 7th set of homework answers is complete".
+
+var forgeTheFellowShip = function() {
+  // create a new div with an id 'the-fellowship'
+  // add an h1 with the text 'The Fellowship' to this new div
+  // append the fellowship to middle-earth
+  // add the unordered lists of hobbits and buddies to 'the-fellowship'
+
+  var fellowship = document.createElement('div');
+  fellowship.setAttribute('id', 'the-fellowship');
+  fellowship.innerHTML = "<h1>The Fellowship</h1>";
+  var middleEarth = document.getElementById('middle-earth');
+  middleEarth.appendChild(fellowship);
+
+  var hobbitList = document.getElementById('Rivendell').childNodes[1];
+  var buddiesList = document.getElementsByTagName('aside')[0].firstChild;
+
+  fellowship.appendChild(hobbitList);
+  fellowship.appendChild(buddiesList);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 8th set of homework answers is complete".
+
+var theBalrog = function() {
+  // change the 'Gandalf' textNode to 'Gandalf the White'
+  // add a class "the-white" to this element
+  // in the style.css, add a css rule to make elements of the class "the-white"
+  // have a white background and a grey border
+
+  var gandalf = document.getElementById('the-fellowship').childNodes[2].firstChild;
+  gandalf.innerText = "Gandalf the White";
+  gandalf.className += ' the-white';
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 9th set of homework answers is complete".
+
+var hornOfGondor = function() {
+  // pop up an alert that the horn of gondor has been blown
+  // Boromir's been killed by the Uruk-hai! Put a linethrough on Boromir's name
+  // Tricky: Remove the Uruk-Hai from the Baddies on the page
+
+  alert('The Horn of Gondor has been blown!');
+  var boromir = document.getElementsByClassName('buddy')[4];
+  boromir.style = "text-decoration: line-through";
+  var uruk = document.getElementsByClassName('baddy')[2];
+  uruk.parentNode.removeChild(uruk);
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 10th set of homework answers is complete".
+
+var itsDangerousToGoAlone = function(){
+  var frodo = document.getElementsByClassName('hobbit')[0];
+  var sam = document.getElementsByClassName('hobbit')[1];
+  var mordor = document.getElementById('Mordor');
+
+  mordor.appendChild(frodo);
+  mordor.appendChild(sam);
+
+  var doom = document.createElement('div');
+  doom.id = "mount-doom";
+  mordor.appendChild(doom);
+
+  // take Frodo and Sam out of the fellowship and move them to Mordor (they don't
+  // need to be inside a ul in Mordor)
+  // add a div with an id of 'mount-doom' to Mordor
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 11th set of homework answers is complete".
+
+var weWantsIt = function() {
+  // Create a div with an id of 'gollum' and add it to Mordor
+  // Move the ring from Frodo and give it to Gollum
+  // Move Gollum into Mount Doom
+
+  var gollum = document.createElement('div');
+  gollum.id = "gollum";
+  var mordor = document.getElementById('Mordor');
+  mordor.appendChild(gollum);
+
+  var ring = document.getElementById('the-ring');
+  gollum.appendChild(ring);
+
+  var doom = document.getElementById('mount-doom');
+  doom.appendChild(gollum);
+
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 12th set of homework answers is complete".
+
+var thereAndBackAgain = function() {
+  // remove Gollum and the Ring from the document
+
+  var doom = document.getElementById('mount-doom');
+  var gollum = document.getElementById('gollum');
+  doom.removeChild(gollum);
+
+  // remove all the baddies from the document
+  // Move all the hobbits back to the shire
+
+
+
+};
+
+// COMMIT YOUR WORK
+// The commit message should read: "The 13th set of homework answers is complete".
+
+
+// =====================================
+// Don't change anything below this line
+// =====================================
+
+window.onload = function() {
+
+  document.getElementById('1').addEventListener('click', makeMiddleEarth);
+  document.getElementById('2').addEventListener('click', makeHobbits);
+  document.getElementById('3').addEventListener('click', keepItSecretKeepItSafe);
+  document.getElementById('4').addEventListener('click', makeBaddies);
+  document.getElementById('5').addEventListener('click', makeBuddies);
+  document.getElementById('6').addEventListener('click', leaveTheShire);
+  document.getElementById('7').addEventListener('click', beautifulStranger);
+  document.getElementById('8').addEventListener('click', forgeTheFellowShip);
+  document.getElementById('9').addEventListener('click', theBalrog);
+  document.getElementById('10').addEventListener('click', hornOfGondor);
+  document.getElementById('11').addEventListener('click', itsDangerousToGoAlone);
+  document.getElementById('12').addEventListener('click', weWantsIt);
+  document.getElementById('13').addEventListener('click', thereAndBackAgain);
+
+};

unit_01/w02d01/homework/lotr_solutions/lotr.md

@@ -0,0 +1,48 @@
+![ga](http://mobbook.generalassemb.ly/ga_cog.png)
+
+# WDI-PANTHALASSA
+
+---
+Title: Lord of the Rings <br>
+Type: Homework<br>
+Duration: Two consecutive evenings <br>
+Course: WDIr-Panthalassa<br>
+Competencies: DOM manipulation with 'vanilla' Javascript<br>
+Prerequisites: Basic Javascript
+
+---
+
+#### Learning Objectives
+
+- Practice using 'vanilla' JavaScript 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 (app.js). Each chapter has a button with a click handler 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.
+
+**Remember you can check your DOM tree in the Elements tab in Chrome Console.**
+
+###Workflow##
+
+Tackle this problem one function from start to finish at a time.
+
+* Write a trivial console.log inside the function to check that the event
+  listener works when you click the right button
+* 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. (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 your work after each function is complete and working properly
+