Thom Page
10 years ago
parent
a0cd00edbd
commit
20f98b1749
@ -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;
|
||||
}
|
||||
@ -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`
|
||||
@ -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,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 = '<h1>' + lands[i] + '</h1>';
|
||||
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 = "<h1>The Fellowship</h1>";
|
||||
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);
|
||||
|
||||
};
|
||||
@ -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