mahuntington
/
panpsychism
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
master
Thom Page 10 years ago
parent 4fb6654c0b
commit a0cd00edbd
5 changed files with 284 additions and 0 deletions
Show Stats Download Patch File Download Diff File

16
unit_01/w02d01/homework/lotr_homework/css/style.css
Unescape View File

@ -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;
}

20
unit_01/w02d01/homework/lotr_homework/dom_functions.md
Unescape View File

@ -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`

25
unit_01/w02d01/homework/lotr_homework/index.html
Unescape View File

@ -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>

175
unit_01/w02d01/homework/lotr_homework/js/app.js
Unescape View File

@ -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);
};

48
unit_01/w02d01/homework/lotr_homework/lotr.md
Unescape View File

@ -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
Write Preview
Loading…
Cancel
Save