Exercise , Part A: Raptor

Make it so that when the page first appears, 5 boys are visible in the town. There are already 5 persons in the HTML, but they have no gender. These are stored in the div with id of people as divs with the class of person. Assign them the additional class boy when the page loads (while retaining the class person).

<div id="people">
	<!-- give these 5 divs the class 'boy' -->
  <div class="person"></div>  
  <div class="person"></div>
  <div class="person"></div>
  <div class="person"></div>
  <div class="person"></div>
</div>

HINT 1 (hover)
HINT 2 (hover)
HINT 3: Add/remove CSS classes from an element with the classList property.

Exercise Solution

window.onload = function() {
    prepopulate();
};
function prepopulate() {
	var people = document.querySelectorAll("#people .person");
    for (var i = 0; i < people.length; i++) {
        people[i].classList.add("boy");
    }
}

Exercise : Raptor - Add

Add! Adds 5 more people of the currently selected gender to the page. A person is a div with the classes of person and either boy or girl.

<button id="add">Add!</button>

HINT 1
HINT 2

Exercise Solution

window.onload = function() {
    prepopulate();
    document.getElementById("add").onclick = populate;
};

// Add! button event handler; adds 5 people of current gender
function populate() {
    for (var i = 0; i < 5; i++) {
        var newPerson = document.createElement("div");
        newPerson.classList.add("person");
        newPerson.classList.add("boy");
        document.getElementById("people").appendChild(newPerson);
    }
}

Exercise : Raptor - Kill

Kill! Randomly "kills" 1/5 of the people of the currently selected gender. Kill them by giving them a class of splat (in addition to their existing person class, but in place of their gender class such as boy or girl).

<button id="kill">Kill!</button>

Exercise Solution

window.onload = function() {
    prepopulate();
    document.getElementById("kill").onclick = kill;
};
// Get all guys or girls and splat one fifth of them
function kill() {
    var peeps = document.querySelectorAll("#people .boy");
    for (var i = 0; i < peeps.length / 5; i++) {
        var randomIndex = Math.floor(Math.random() * peeps.length);
        peeps[randomIndex].classList.remove("boy");
        peeps[randomIndex].classList.add("splat");
    }   
}

Exercise : Raptor - Boys

Boys / Girls: Selects which gender to add or kill.

<label><input id="boys" type="radio"
		name="gender" /> Boys</label>

<label><input id="girls" type="radio"
		name="gender" checked="checked" /> Girls</label>

Exercise Solution

// Helper function to get which gender is currently selected.
// Use the return from this to parameterize populate() and kill().
function getGender() {
    if (document.getElementById("boys").checked) {
        return "boy";
    } else {
        return "girl";
    }
}

Exercise : Raptor - Clean Up

Clean Up! Removes any dead splatted people from the page (any divs with class splat).

<button id="cleanup">Clean up!</button>

HINT: You can remove an element from the page by calling its parent node DOM object's removeChild method.

Exercise Solution

window.onload = function() {
    prepopulate();
    document.getElementById("cleanup").onclick = clearDead;
};

// Clean up the dead! button event handler
function clearDead() {
    var dead = document.querySelectorAll("#people .splat");
    for (var i = 0; i < dead.length; i++) {
        dead[i].parentNode.removeChild(dead[i]);
    }   
}

Exercise : Raptor - Stomp

Stomp! Makes the raptor move up or down by 75px and also kills 1/5 of both genders. The raptor is an img tag with an id of raptor.

<button id="stomp">Stomp!</button>

HINT 1: Move the raptor by setting his top style attribute to be either 10px or 85px.
HINT 2: Get an object's existing style properties with window.getComputedStyle(element).propertyName .

Exercise Solution

window.onload = function() {
    prepopulate();
    document.getElementById("stomp").onclick = stomp;
};

// Stomp! button event handler
function stomp() {
    var raptor = document.getElementById("raptor");
    var pxtop = parseInt(window.getComputedStyle(raptor).top);
    raptor.style.top = ((pxtop + 75) % 150) + "px";
    splat("boy");
    splat("girl");
}

Exercise : Raptor - Enrage

Enrage! Applies the CSS class of enrage to the raptor and the page's top h1 heading. In addition, the raptor should be made to be 50px wider than his current width. Clicking the button again removes the class from both elements and returns the width to its previous value. The h1 has an existing CSS class that should not be removed. You are guaranteed that there is exactly one h1 element on the page.

<button id="enrage">Enrage!</button>

Exercise Solution

function enrageRaptor() {
    var raptor = document.getElementById("raptor");
    var width = parseInt(window.getComputedStyle(raptor).width);
    var h1 = document.querySelector("h1");

    // If enraged -- go back to normal, else get ENRAGED
    if (raptor.classList.contains("enrage")) {
        raptor.classList.remove("enrage");
        h1.classList.remove("enrage");
        raptor.style.width = width - 50 + "px";
    } else {
        raptor.classList.add("enrage");
        h1.classList.add("enrage");
        raptor.style.width = width + 50 + "px";
    }
}

Exercise : Raptor - Patrol

Patrol! (advanced) Makes the raptor animate. He should move right by 4px every 20ms until his left position style is at least 300px, he should change directions and start patrolling to the left until his left position is 10px or less, at which point he stops patrolling.

<button id="patrol">Patrol!</button>

HINT: Set a timer with the setInterval method.

Exercise Solution

// Patrol! event handler code (advanced)
var timer;

function patrol() {
    clearInterval(timer);
    timer = setInterval(patrolRight, 20);
}

function patrolRight() {
    var raptor = document.getElementById("raptor");
    var pxleft = parseInt(window.getComputedStyle(raptor).left);
    pxleft += 4;
    raptor.style.left = pxleft + "px";
    if (pxleft >= 300) {
        clearInterval(timer);
        timer = setInterval(patrolLeft, 20);
    }
}

Exercise Solution

function patrolLeft() {
    var raptor = document.getElementById("raptor");
    var pxleft = parseInt(window.getComputedStyle(raptor).left);
    pxleft -= 4;
    raptor.style.left = pxleft + "px";
    if (pxleft <= 10) {
        clearInterval(timer);
        raptor.style.top = "5px";  // Reset the Raptor
        raptor.style.left = "10px";
    }
}