originalgremlin · nyirendalen · Oct 24, 2012 · Oct 31, 2012 · Oct 31, 2012 · Oct 31, 2012
diff --git a/my_first_push.txt b/my_first_push.txt
@@ -0,0 +1,18 @@
+1) add your name to the last line of this file
+2) save the file
+3) git pull origin coming-soon
+4) git add my_first_push.txt
+5) git status
+6) git commit -m "Added my name."
+7) git push origin coming-soon
+
+-------------------
+Barry Shapira
+Julia Dills
+Taha Jiwajis
+Arnold Minde
+Hamadi Mwapachu
+leonard nyirenda
+Dickson ng'ang'a
+Johannes Hilden
+Gosso Gasmoo
diff --git a/web/homework4/example1.html b/web/homework4/example1.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+<head>
+	<script src="../scripts/lib/underscore.js"></script>
+	<script src="../scripts/lib/jquery.js"></script>
+	<script src="../scripts/lib/backbone.js"></script>
+	<script src="../scripts/lib/backbone.marionette.js"></script>
+	<script>_.templateSettings = { interpolate: /\{\{(.+?)\}\}/g };</script>
+</head>
+
+<body>
+<div id="employee"></div>
+
+<script type="text/template" id="template-employee">
+	<p>Full Name: {{ name }}</p>
+	<p>Date of Birth: {{ birthdate }}</p>
+</script>
+
+<script>
+// numbers
+var a1 = 5,    // integer
+	a2 = 3.59  // float
+
+// string
+var b = 'hello class';
+
+// array
+var c1 = [1, 2, 3, 4, 5],
+	c2 = ['one', 'two', 'three'],
+	c3 = [1, 'two', 3, 'four'],
+	c4 = [1, 'two', 3, 'four', [5,6,7]];
+
+// object
+var d = {
+	key1: 'value 1',
+	key2: 'value 2',
+	key3: 3,
+	key4: [4, 5, 6],
+	key5: { hello: 'world' }
+};
+
+// function that takes two numeric arguments
+var e = function (arg1, arg2) {
+	return arg1 + arg2;
+};
+var f = e(5, 10);
+
+// function that takes a function as an argument
+var g = function (func1) {
+	return 2 * func1(5, 10);
+};
+var h = g(e);
+
+// function used as a 'callback'
+var i = function (event) {
+	console.log(event);
+};
+$('body').on('click', i);
+
+// object class
+var j = Backbone.Model;
+
+// object instance
+var k = new Backbone.Model();
+
+// object inheritance
+var SubClassOfModel = Backbone.Model.extend({
+	something: 'this property only exists in the subclass'
+});
+var instanceOfSubClass = new SubClassOfModel();
+
+// Backbone Model
+var options = {
+	urlRoot: '/api/kazifasta',
+	defaults: {
+		name: '',
+		birthdate: [2000, 1, 1]
+	}
+};
+var Employee = Backbone.Model.extend(options);
+
+// Backbone Model instance
+var barry = new Employee({
+	name: 'Barry Shapira',
+	birthdate: [1975, 11, 7]
+});
+
+// Marionette View
+var EmployeeView = Backbone.Marionette.ItemView.extend({
+	events: {
+		'click': 'onClick'
+	},
+	template: '#template-employee',
+
+	onClick: function (event) {
+		alert('Hello ' + this.model.get('name') + '!');
+	}
+});
+
+// Marionette View instance
+var barryView = new EmployeeView({
+	el: '#employee',
+	model: barry
+});
+barryView.render();
+</script>
+</body>
+</html>
diff --git a/web/homework4/example2.html b/web/homework4/example2.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+<head>
+	<script src="../scripts/lib/underscore.js"></script>
+	<script src="../scripts/lib/jquery.js"></script>
+	<script src="../scripts/lib/backbone.js"></script>
+	<script src="../scripts/lib/backbone.marionette.js"></script>
+	<script>_.templateSettings = { interpolate: /\{\{(.+?)\}\}/g };</script>
+
+	<!-- TODO: convert this to a form with inputs -->
+	<script type="text/template" id="template-employee">
+		<p>Full Name: {{ name }}</p>
+		<p>Date of Birth: {{ birthdate }}</p>
+		<button>Click to save</button>
+	</script>
+
+	<script>
+	// TODO: expand the model to include phone number, email, etc.
+	// http://backbonejs.org/#Model-defaults
+	var EmployeeModel = Backbone.Model.extend({
+		urlRoot: '/api/kazifasta',
+		defaults: {
+			name: '',
+			birthdate: [2000, 1, 1]
+		}
+	});
+
+	var EmployeeView = Backbone.Marionette.ItemView.extend({
+		events: {
+			'click button': 'onClick'
+		},
+		template: '#template-employee',
+
+		onClick: function (event) {
+			// TODO: get data from the form inputs
+			// http://api.jquery.com/val/
+
+			// TODO: put form data in the model
+			// http://backbonejs.org/#Model-set
+
+			// TODO: save the model to the database
+			// http://backbonejs.org/#Model-save
+		}
+	});
+
+	$('document').ready(function () {
+		var m = new EmployeeModel({
+			name: 'Joe Awesome',
+			birthdate: [1975, 11, 7]
+		});
+
+		// Marionette View instance
+		var v = new EmployeeView({
+			el: '#employee',
+			model: m
+		});
+		v.render();
+	});
+	</script>
+</head>
+
+<body>
+	<div id="employee"></div>
+</body>
+</html>
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+<head>
+	<title>Kazi Fasta</title>
+	<link rel="stylesheet" href="static/styles/main.css" />
+
+	<!--
+		We're not doing much, and there are already 5 script includes.
+
+		When the project grows there can sometimes be 50 or even 100 of these includes,
+		all depending on other scripts (like backbone depends on jquery).  This can be
+		a nightmare to maintain.  We also end up polluting the global namespace with dozens
+		of class names.
+
+		Pretty soon we're going to have to do something about this.  One popular solution
+		is to use the require.js AMD library to asynchronously calculate module dependencies
+		and load our scripts.
+	-->
+	<script src="scripts/lib/underscore.js"></script>
+	<script src="scripts/lib/jquery.js"></script>
+	<script src="scripts/lib/backbone.js"></script>
+	<script src="scripts/lib/backbone.marionette.js"></script>
+	<script src="scripts/main.js"></script>
+
+	<!--
+		These are view templates.  They're not going to live here for long.
+		A much better place is in the web/templates/ directory.  They can go there
+		once we set up require.js.
+	-->
+	<script type="text/template" id="template-coming-soon-form">
+		<h2>Are you interested in our awesome project?  Enter your email below for awesome updates.</h2>
+		<form>
+			<fieldset>
+				<label>Email address</label>
+				<input name="email" type="email" />
+				<button type="submit">Sign Up</button>
+			</fieldset>
+		</form>
+	</script>
+
+	<script type="text/template" id="template-coming-soon-thanks">
+		<h2>Thank you for your interest!</h2>
+		<a class="reset">Reset the page</a>
+	</script>
+</head>
+
+<!--
+	There isn't much of a body, but it never actually gets much bigger.  We just keep
+	stuffing different views into the content section when it's time to show different
+	information.  Watch how we switch back and forth between the coming soon form and
+	thank you views without ever reloading the page.
+-->
+<body>
+	<header>
+		<img src="static/images/logo.png" />
+	</header>
+	<section class="content"></section>
+</body>
+</html>