Untitled

<html>
	<head>
		<title>Lab 6</title>
	</head>
	<body>
		<h1 id="headline">Hello...</h1>
		Contact list
		<ul class="-contact-list-view">

		</ul>
		<script>
		var contactList = [];

		//ingredient 1
		var protoContact = {
			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);
		};

		/*
		alternateBuild({
			first : "Adam"
		});
		*/
		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");

		var list = document.getElementsByClassName(
					"-contact-list-view")[0];

		renderContacts = function() {
			var listItems = "";
			for (var i=0; i<contactList.length; i++)
				listItems += "<li>" + contactList[i].toString()
					+ "</li>";
			list.innerHTML = listItems;
		}

		renderContacts();
		list.addEventListener("click", function(e){
			console.log(e);
			e.target.style.backgroundColor = "yellow";
		});

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