diff --git a/unit_01/w02d01/homework/lotr_homework/css/style.css b/unit_01/w02d01/homework/lotr_homework/css/style.css index f49955f..525344f 100644 --- a/unit_01/w02d01/homework/lotr_homework/css/style.css +++ b/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; +} \ No newline at end of file diff --git a/unit_01/w02d01/homework/lotr_homework/dom_functions.md b/unit_01/w02d01/homework/lotr_homework/dom_functions.md index de96e98..77468ea 100644 --- a/unit_01/w02d01/homework/lotr_homework/dom_functions.md +++ b/unit_01/w02d01/homework/lotr_homework/dom_functions.md @@ -17,4 +17,10 @@ * `node.innerText =` * `node.className = ` * `node.classList.add` - * `node.setAttribute` \ No newline at end of file + * `node.setAttribute` + * `node.id = ` + * `node.style = ` +* Traversal + * `node.firstChild` + * `node.childNodes` + * `node.parentNode` \ No newline at end of file diff --git a/unit_01/w02d01/homework/lotr_homework/js/app.js b/unit_01/w02d01/homework/lotr_homework/js/app.js index 3af2930..0d307b7 100644 --- a/unit_01/w02d01/homework/lotr_homework/js/app.js +++ b/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 called 'the-fellowship' + // create a new div with an id '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' - // after each character is added make an alert that they have joined your party + // append the fellowship to middle-earth + // 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! - // put a linethrough on boromir's name - // Remove the Uruk-Hai from the Baddies on the page + // 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 + }; // 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 diff --git a/unit_01/w02d01/homework/lotr_solutions/css/style.css b/unit_01/w02d01/homework/lotr_solutions/css/style.css new file mode 100644 index 0000000..525344f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/unit_01/w02d01/homework/lotr_solutions/dom_functions.md b/unit_01/w02d01/homework/lotr_solutions/dom_functions.md new file mode 100644 index 0000000..77468ea --- /dev/null +++ b/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` \ No newline at end of file diff --git a/unit_01/w02d01/homework/lotr_solutions/index.html b/unit_01/w02d01/homework/lotr_solutions/index.html new file mode 100644 index 0000000..2009357 --- /dev/null +++ b/unit_01/w02d01/homework/lotr_solutions/index.html @@ -0,0 +1,25 @@ + + + Lord Of The Rings + + + + + +

Lord Of The Rings

+ + + + + + + + + + + + + +
+ + diff --git a/unit_01/w02d01/homework/lotr_solutions/js/app.js b/unit_01/w02d01/homework/lotr_solutions/js/app.js new file mode 100644 index 0000000..fcf2efd --- /dev/null +++ b/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 = '

' + lands[i] + '

'; + 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 = "

The Fellowship

"; + 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); + +}; diff --git a/unit_01/w02d01/homework/lotr_solutions/lotr.md b/unit_01/w02d01/homework/lotr_solutions/lotr.md new file mode 100644 index 0000000..3b2ad8d --- /dev/null +++ b/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
+Type: Homework
+Duration: Two consecutive evenings
+Course: WDIr-Panthalassa
+Competencies: DOM manipulation with 'vanilla' Javascript
+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 +