From a0cd00edbd27efb6e876daa9084b286ed6dd8a40 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Sun, 22 May 2016 16:42:56 -0400 Subject: [PATCH] init --- .../homework/lotr_homework/css/style.css | 16 ++ .../homework/lotr_homework/dom_functions.md | 20 ++ .../w02d01/homework/lotr_homework/index.html | 25 +++ .../w02d01/homework/lotr_homework/js/app.js | 175 ++++++++++++++++++ unit_01/w02d01/homework/lotr_homework/lotr.md | 48 +++++ 5 files changed, 284 insertions(+) create mode 100644 unit_01/w02d01/homework/lotr_homework/css/style.css create mode 100644 unit_01/w02d01/homework/lotr_homework/dom_functions.md create mode 100644 unit_01/w02d01/homework/lotr_homework/index.html create mode 100644 unit_01/w02d01/homework/lotr_homework/js/app.js create mode 100644 unit_01/w02d01/homework/lotr_homework/lotr.md diff --git a/unit_01/w02d01/homework/lotr_homework/css/style.css b/unit_01/w02d01/homework/lotr_homework/css/style.css new file mode 100644 index 0000000..f49955f --- /dev/null +++ b/unit_01/w02d01/homework/lotr_homework/css/style.css @@ -0,0 +1,16 @@ +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; +} diff --git a/unit_01/w02d01/homework/lotr_homework/dom_functions.md b/unit_01/w02d01/homework/lotr_homework/dom_functions.md new file mode 100644 index 0000000..de96e98 --- /dev/null +++ b/unit_01/w02d01/homework/lotr_homework/dom_functions.md @@ -0,0 +1,20 @@ +## 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` \ No newline at end of file diff --git a/unit_01/w02d01/homework/lotr_homework/index.html b/unit_01/w02d01/homework/lotr_homework/index.html new file mode 100644 index 0000000..2009357 --- /dev/null +++ b/unit_01/w02d01/homework/lotr_homework/index.html @@ -0,0 +1,25 @@ + + + Lord Of The Rings + + + + + +

Lord Of The Rings

+ + + + + + + + + + + + + +
+ + diff --git a/unit_01/w02d01/homework/lotr_homework/js/app.js b/unit_01/w02d01/homework/lotr_homework/js/app.js new file mode 100644 index 0000000..3af2930 --- /dev/null +++ b/unit_01/w02d01/homework/lotr_homework/js/app.js @@ -0,0 +1,175 @@ +// ============================== +// 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 + // 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 ) +}; + +// 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 hobbits in the shire + // give each hobbit a class of "hobbit" +}; + +// 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 +}; + +// 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" +}; + +// 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 + // 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 +}; + +// 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" +}; + +// 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' + // 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 +}; + +// 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 +}; + +// 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 + // 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 + // 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 + // Remove the ring from Frodo and give it to Gollum + // Move Gollum into Mount Doom +}; + +// 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 + // 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_homework/lotr.md b/unit_01/w02d01/homework/lotr_homework/lotr.md new file mode 100644 index 0000000..3b2ad8d --- /dev/null +++ b/unit_01/w02d01/homework/lotr_homework/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 +