first commit

bkrieger · Sep 12, 2012 · 3272fce · 3272fce
commit 3272fce
Show file tree

Hide file tree

Showing 11 changed files with 1,711 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+chrome-ex-pennapps
+==================
+
+[PennApps Tech Talk] Chrome Extension 
diff --git a/contacts.html b/contacts.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src='js/jquery.js'></script>
+		<script src='js/handlebars.js'></script>
+		<script src='js/templates.js'></script>
+		<script src='js/contacts.js'></script>
+		<script src='js/text.js'></script>
+		<link rel='stylesheet' href='css/style.css' />
+	</head>
+	<body>
+		<div id='container'>
+			<form class='contact-form'>
+				<input type='text' id='name' placeholder='Name' />
+				<input type='text' id='number' placeholder='Number' />
+				<input type='submit' id='save' />
+			</form>
+
+			<div id='contacts'>
+
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,13 @@
+#container {
+	width: 330px;
+}
+#name {
+	width: 80px;
+}
+#number {
+	width: 130px;
+}
+#contacts {
+	max-height: 500px;
+	overflow: scroll;
+}
diff --git a/img/contacts.jpg b/img/contacts.jpg
diff --git a/js/contacts.js b/js/contacts.js
@@ -0,0 +1,49 @@
+$(document).ready(function() {
+
+	//Save a contact to localStorage
+	function save(name,number) {
+		var data = localStorage["contacts"];
+		var contacts = JSON.parse(data);
+		contacts[name] = number;
+		localStorage["contacts"] = JSON.stringify(contacts);
+	}
+
+	//shows a single contact
+	function addOne(name,number) {
+		//To do this we had to install handlebars from npm
+		//Need handlebars.js
+		//Make file contact.handlebars
+		//Then fill in contact.handlebars file with the template we want
+		//Run "handlebars templates/contact.handlebars -f js/templates.js" whenever we change contact.handlebars
+
+		var template = Handlebars.templates.contact;
+		var contact_html = template({name: name, number: number});
+		$("#contacts").prepend(contact_html);
+		$(".text-form").hide();
+	}
+
+	//shows all contacts
+	function render() {
+		var data = localStorage["contacts"];
+		var contacts = JSON.parse(data);
+		for (var name in contacts) {
+			addOne(name, contacts[name]);
+		}
+	} 
+
+	//Define what happens when we click submit
+	$(".contact-form").on("submit", function(e) {
+		//e.preventDefault(); //prevents form from resetting on submit
+		var name = $("#name").val();
+		var number = $("#number").val();
+		save(name,number);
+		addOne(name,number);
+		console.log(name+ " " + number);
+	});
+
+	//if localStorage of "contacts" is empty
+	if(!localStorage["contacts"]) {
+		localStorage["contacts"] = "{}";
+	}
+	render();
+});