Exercise : Cheerleader

Given cheerleader.html, write the JavaScript code cheerleader.js to display a large character when the user moves the mouse over one of the letters at the bottom. (sample solution)

• The letters to observe are spans in the letterinput area.
• Create and inject a new span with class cheer into the cheeroutput area. Each character should be in upper case, followed by an exclamation point and a space.
• For added challenge, make it so that 2 seconds after the letter appears, that letter will remove itself from the page.
• If you want to try out a new kind of event, make it so that the letter will appear when the user moves the mouse on top of the letter (onmouseover), rather than clicking it (onclick).

Exercise Solution

window.onload = function() {
	var letters = document.querySelectorAll("#letterinput span");
	for (var i = 0; i < letters.length; i++) {
		letters[i].onmouseover = letterMouseOver;
	}
};

function letterMouseOver() {
	var span = document.createElement("span");
	span.className = "cheer";
	span.innerHTML = this.innerHTML.toUpperCase() + "! ";
	document.getElementById("cheeroutput").appendChild(span);
	setTimeout(removeCheer, 2000);
}

function removeCheer() {
	var letters = document.querySelectorAll("#cheeroutput span.cheer");
	if (letters.length > 0) {
		letters[0].parentNode.removeChild(letters[0]);
	}
}

Exercise , Part B: Key Presses

• Add a feature so that if the user types a key, that letter will appear as a cheer letter, the same as if the user had moved the mouse over that letter on the page.
• See the lecture slides on key events. Some things you'll need to know:
  • how to listen to key presses on the overall page (document.onkeydown)
  • how to find out which key was pressed (event.charCode)
  • how to convert a character code into a String (String.fromCharCode)

Exercise Solution

window.onload = function() {
	...
	document.onkeypress = documentKeyPress;
};

function letterMouseOver() {
	makeCheer(this.innerHTML);
}

function documentKeyPress(event) {
	makeCheer(String.fromCharCode(event.charCode));
}

function makeCheer(letter) {
	var span = document.createElement("span");
	span.className = "cheer";
	span.innerHTML = letter.toUpperCase() + "! ";
	document.getElementById("cheeroutput").appendChild(span);
	setTimeout(removeCheer, 2000);
}