Thom Page
10 years ago
parent
4fb6654c0b
commit
a0cd00edbd
@ -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;
|
||||
}
|
||||
@ -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`
|
||||
@ -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>
|
||||
@ -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);
|
||||
|
||||
};
|
||||
@ -0,0 +1,48 @@
|
||||
|
||||
|
||||
# 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
|
||||
|
||||
Loading…
Reference in new issue