updated hw

css/style.css

@@ -176,4 +176,4 @@ ul {
     top: 385px;
   }
 
-}
+}

js/app.js

@@ -22,18 +22,24 @@ function makeMiddleEarth() {
 	console.log('1: makeMiddleEarth')
 
 	// 1. create a section tag with an id of middle-earth
-
+	const section = document.createElement('section')
+	section.id = 'middle-earth'
 	// 2. use a for loop to iterate over the lands array that does the following:
-
-	//   2a. creates an article tag (there should be one for each land when the loop is done)
-
-	//   2b. gives each land article an `id` tag of the corresponding land name
-
-	//   2c. includes an h1 with the name of the land inside each land article
-
-	//   2d. appends each land to the middle-earth section
+	for (let i = 0; i < lands.length; i ++) {
+		//   2a. creates an article tag (there should be one for each land when the loop is done)
+		const landArticle = document.createElement('article')
+		//   2b. gives each land article an `id` tag of the corresponding land name
+		landArticle.id = lands[i]
+		//   2c. includes an h1 with the name of the land inside each land article
+		const landName = document.createElement('h1')
+		landName.textContent = lands[i]
+		landArticle.appendChild(landName)
+		//   2d. appends each land to the middle-earth section
+		section.appendChild(landArticle)
+	}
 
 	// 3. append the section to the body of the DOM.
+	document.body.appendChild(section)
 }
 
 // COMMIT YOUR WORK
@@ -45,15 +51,30 @@ function makeMiddleEarth() {
 
 function makeHobbits() {
 	console.log('2: makeHobbits')
-
+	// const theShire = document.querySelector('#The-Shire')
+	// hint: get 'The-Shire' by using its id
+	const theShire = document.getElementById('The-Shire')
+	console.log('this is the shire', theShire)
 	// display an `unordered list` of hobbits in the shire
-
+	// hint: create a 'ul' outside the loop into which to append the 'li's
+	const ulHobbits = document.createElement('ul')
+	ulHobbits.id = 'hobbits'
 	// give each hobbit a class of `hobbit`
-
+	for (let i = 0; i < hobbits.length; i++) {
+		// create an li for each hobbit
+		const liHobbit = document.createElement('li')
+		// give each hobbit a class
+		liHobbit.className = 'hobbit'
+		// give each hobbit some text
+		liHobbit.textContent = hobbits[i]
+		// append each hobbit to the ul
+		ulHobbits.appendChild(liHobbit)
+	}
+	theShire.appendChild(ulHobbits)
+}
 	// hint: create a 'ul' outside the loop into which to append the 'li's
 
 	// hint: get 'The-Shire' by using its id
-}
 
 // COMMIT YOUR WORK
 // The commit message should read: "Chapter 2 complete - Made the Hobbits".
@@ -66,10 +87,18 @@ function keepItSecretKeepItSafe() {
 	console.log('3: keepItSecretKeepItSafe')
 
 	// create a div with an id of `'the-ring'`
-
+	const oneRingDiv = document.createElement('div')
+	oneRingDiv.id = 'the-ring'
 	// give the div a class of `'magic-imbued-jewelry'`
-
+	oneRingDiv.className = 'magic-imbued-jewelry'
+	// we want to target Frodo specifically
+	// so we'll start with the ul, by it's id
+	const ulHobbits = document.querySelector('#hobbits')
+	const hobbitsArray = ulHobbits.children
+	// then we'll need to look at how we can target the individual li's from there
+	const frodoLi = hobbitsArray[0]
 	// add the ring as a child of `Frodo`
+	frodoLi.appendChild(oneRingDiv)
 }
 
 // COMMIT YOUR WORK
@@ -81,12 +110,20 @@ function keepItSecretKeepItSafe() {
 
 function makeBaddies() {
 	console.log('4: makeBaddies')
-
+	const mordor = document.getElementById('Mordor')
+	console.log('this is mordor', mordor)
 	// display an unordered list of baddies in Mordor
-
+	const ulBaddies = document.createElement('ul')
+	ulBaddies.id = 'baddies'
 	// give each of the baddies a class of "baddy"
-
-	// remember to append them to Mordor
+	for (let i = 0; i < baddies.length; i++) {
+		const liBaddie = document.createElement('li')
+		liBaddie.classname = 'baddie'
+		liBaddie.textContent = baddies[i]
+		ulBaddies.appendChild(liBaddie)
+		// remember to append them to Mordor
+		mordor.appendChild(ulBaddies)
+	}
 }
 
 // COMMIT YOUR WORK
@@ -100,10 +137,23 @@ function makeBuddies() {
 	console.log('5: makeBuddies')
 
 	// create an `aside` tag
-
+	const aside = document.createElement('aside')
 	// put an `unordered list` of the `'buddies'` in the aside
-
+	const ulBuddies = document.createElement('ul')
+	ulBuddies.id = 'buddies'
+	for (let i = 0; i < buddies.length; i++) {
+		const liBuddy = document.createElement('li')
+		liBuddy.classname = 'buddie'
+		liBuddy.textContent = buddies[i]
+		ulBuddies.appendChild(liBuddy)
+	aside.textContent = buddies[i]
+	ulBuddies.appendChild(liBuddy)
+	aside.appendChild(ulBuddies)
 	// insert your aside as a child element of `rivendell`
+	const rivendell = document.getElementById('Rivendell')
+	console.log('this is rivendell', rivendell)
+	rivendell.appendChild(aside)
+	}
 }
 
 // COMMIT YOUR WORK
@@ -128,7 +178,6 @@ function leaveTheShire() {
 
 function beautifulStranger() {
 	console.log('7: beautifulStranger')
-
 	// change the `'Strider'` text to `'Aragorn'`
 }