Untitled

<html>
	<head>
		<title>JS Class</title>
	</head>
	<body>
		<h1>erg</h1>
		Search: <input type="text"></input><button>Find</button>
		<table class="output">
		</table>
		<script>
			contact = {
				protoContact : {
					toString : function() {
						return this.first + " " + this.last + " " + this.email;
					}
				},

				init : function() {
					this.Contact.prototype = this.protoContact;
				},

				Contact : function() {},

				items : [],
				seed : 0,

				build : function(args) {
					var newObj = new this.Contact();
					for (var k in args)
						newObj[k] = args[k];
					newObj.id = this.seed++;
					this.items.push(newObj);
				},

				find : function(field, value) {
					if (value === undefined) {
						value = field;
						field = "last";
					}
					for (var i=0; i<this.items.length; i++) {
						if (this.items[i][field] == value)
							return this.items[i];
					}
				},

				testdata : function() {
					this.build({first:"Joe1", last:"Smith1", email:"joe1@gmail.com"});
					this.build({first:"Joe2", last:"Smith2", email:"joe2@gmail.com"});
					this.build({first:"Joe3", last:"Smith3", email:"joe3@gmail.com"});
				}
			};

			contact.init();
			contact.testdata();
			document.querySelector("button").addEventListener("click", function() {
				var c = contact.find(document.querySelector("input").value);
				var view = viewFromModel(c);
				view.style.background = "yellow";
			});

			render = function(contacts) {
				var t = document.querySelector("table");
				t.innerHTML = "<tr><th>First</th><th>Last</th><th>Email</th>";
				for (var i=0; i<contacts.length; i++) {
					var row = document.createElement("tr");
					t.appendChild(row);
					["first", "last", "email"].forEach(function(k) {
						var cell = document.createElement("td");
						cell.innerHTML = contacts[i][k];
						row.appendChild(cell);
					});
					row.setAttribute("class", "contact-" + contacts[i].id);
				}

			};

			viewFromModel = function(m) {
				return document.querySelector(".contact-" + m.id);
			};

			render(contact.items);
			document.body.removeChild(document.querySelector("h1"));
			var head = document.createElement("h2");
			head.innerHTML = "Contacts!";
			document.body.insertBefore(head, document.body.firstChild);

		</script>

	</body>
</html>