Untitled

<html>
	<head>
		<title>Lab 8</title>
	</head>
	<body>
		<h1 id="headline">Hello...</h1>
		Contact details<br/>
		First name: <span class="contact-first"></span><br/>
		Last name: <span class="contact-last"></span><br/>
		Email: <span class="contact-email"></span>
		<hr/>
		Last name: <input type="text" class="contact-last-input"/>
		<br/>
		<button class="find">Find contact</button>
		<script>
		var contactList = [];

		//ingredient 1
		var protoContact = {
			type : "contact",
			first : "default first name",
			last : "default last name",
			email : "default email",
			toString : function() {
				return this.first + " " + this.last +
					", " + this.email;
			}
		};

		//ingredient 2
		var Contact = function() {};

		//mixing:
		Contact.prototype = protoContact;

		var build = function(firstName, lastName, emailAddr) {
			var newContact = new Contact();

			newContact.first = firstName;
			newContact.last = lastName;
			newContact.email = emailAddr;
			contactList.push(newContact);
		};

		var alternateBuild = function(props) {
			var newContact = Object.create(protoContact);
			for (k in props)
				if (props.hasOwnProperty(k))
					newContact[k] = props[k];
			contactList.push(newContact);
		};

		var edit = function(contact) {
			var newEmail = prompt("Enter new email");
			if (newEmail)
				contact.email = newEmail;
		};

		var find = function(lastname) {
			for (var i=0; i<contactList.length; i++)
				if (contactList[i].last == lastname)
					return contactList[i];
		};

		var remove = function(contact) {
			for (var i=0; i<contactList.length; i++)
				if (contactList[i] == contact)
					contactList.splice(i, 1);
		};

		build("Joe1", "Smith1", "joe1@gmail.com");
		build("Joe2", "Smith2", "joe2@gmail.com");
		build("Joe3", "Smith3", "joe3@gmail.com");
		build("Joe4", "Smith4", "joe4@gmail.com");

		document.getElementById("headline").innerHTML="Contacts";

		document.getElementsByClassName("find")[0].addEventListener(
			"click", function(e) {
				var lastname = document.getElementsByClassName
					("contact-last-input")[0].value;
				var contact = find(lastname);
				render(contact);
			}
		);

		var render = function(contact) {
			document.getElementsByClassName("contact-first")[0]
				.innerHTML = contact.first;
			document.getElementsByClassName("contact-last")[0]
				.innerHTML = contact.last;
			document.getElementsByClassName("contact-email")[0]
				.innerHTML = contact.email;
		}

		</script>
	</body>
</html>