w02d03_homework_solutions_LOTR

w02d03_homework_solutions.js

console.log('lotr homework solutions');
//////////////////////////////////////////////
// Let's make the land
//////////////////////////////////////////////

var lands = ["The Shire", "Rivendell", "Mordor"];

var makeMiddleEarth = function(lands) {
  //create and append middle earth
  var middleEarth = document.createElement("section");
  middleEarth.setAttribute("id", "middle-earth");
  document.body.appendChild(middleEarth);

  //create lands, add name, and append land to middle earth.
  for (i = 0; i < lands.length; i++){
    var landElements = document.createElement("article");
    landElements.innerHTML = "<h1>" + lands[i];
    middleEarth.appendChild(landElements);
  }
};

//////////////////////////////////////////////
// Let's make some hobbits
//////////////////////////////////////////////
var hobbits = [
  "Frodo Baggins",
  "Samwise 'Sam' Gamgee",
  "Meriadoc \"Merry\" Brandybuck",
  "Peregrin 'Pippin' Took"
];

//create an unordered list. Create the hobbits as list items, give them a class of `hobbit`, and attach them to the ul.
var makeHobbits = function(hobbits){
  var unorderedList = document.createElement("ul");

  for (i = 0; i < hobbits.length; i++){
    var hobbitsElement = document.createElement("li");
    hobbitsElement.innerHTML = hobbits[i];
    hobbitsElement.setAttribute("class", "hobbits");
    unorderedList.appendChild(hobbitsElement);
  }

//Get the shire element and append the hobbits to it.
//note: needed to NOT have var in front of shire when defining this variable so that it can be used inside the councilOfElrond function.
  shire = document.querySelector('section article');
  shire.appendChild(unorderedList);
};

//////////////////////////////////////////////
// Let's make some non-hobbit characters (buddies)
//////////////////////////////////////////////
var buddies = [
  "Gandalf the Grey",
  "Legolas",
  "Gimli",
  "Strider",
  "Boromir"
];

var councilOfElrond = function(buddies) {
  // create an aside tag and place it before Rivendell
  var aside = document.createElement('aside');
  shire.appendChild(aside);

  // create an unordered list for the buddies
  buddyList = document.createElement('ul');

  //create list items of each of the buddies and attache it to the ul
  for (i = 0; i < buddies.length; i ++){
    buddyElements = document.createElement('li');
    buddyElements.innerHTML = buddies[i];
    buddyList.appendChild(buddyElements);
  }

  //attach the unordered list to the aside element
  aside.appendChild(buddyList);
};

//////////////////////////////////////////////
// The Ring
//////////////////////////////////////////////
var keepItSecretKeepItSafe = function() {

//Create the ring and give it an id of `the-ring`
  var ring = document.createElement('div');
  ring.setAttribute("id", "the-ring");

//Add the-ring element as a child of Frodo
  var frodo = document.querySelector('.hobbits');
  frodo.appendChild(ring);
};
//////////////////////////////////////////////
// Beautiful Stranger
//////////////////////////////////////////////
var beautifulStranger = function(){
  //Search through the list items to find the element that contains Stringer
  var searchNames = document.getElementsByTagName("li");

  // Once you go through the names, update the tag that has Stringer to Aragorn
  for (var i = 0; i < searchNames.length; i ++) {
    if (searchNames[i].innerHTML === "Strider"){
      searchNames[i].innerHTML = "Aragorn";
      break;
    };
  };
};

//////////////////////////////////////////////
// HUNGRY FOR MORE - Forget the Fellowship
//////////////////////////////////////////////
function forgeTheFellowShip() {

  // First, capture the rivendell element.
  var searchLands = document.getElementsByTagName("h1");

  for (var i = 0; i < searchLands.length; i ++) {
    if (searchLands[i].innerHTML === "Rivendell"){
      var rivendell = searchLands[i];
      break;
    };
  }

  // move the buddies to Rivendell
  rivendell.append(buddyList);

// gather all of the hobbits in buddies in a variable called `tehFellowship`
// assign them all a class of `the-fellowship`
  var theFellowship = document.getElementsByTagName('li');
  for (var i = 0; i < theFellowship.length; i ++){
    theFellowship[i].setAttribute("class", "the-fellowship");
  };
}

//////////////////////////////////////////////
// Load your functions
//////////////////////////////////////////////
window.onload = function(){
  makeMiddleEarth(lands);
  makeHobbits(hobbits);
  councilOfElrond(buddies);
  keepItSecretKeepItSafe();
  beautifulStranger();
};