Small tweaks to jQuery example

- Use the base.css
- Trim whitespace on new todo
- Trim whitespace on todo update, and remove todo if empty
- Reset the checked state of "Mark all as complete", when the "Clear completed" button is clicked

architecture-examples/jquery/css/app.css

-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
-	line-height: 1.4em;
-	background: #eeeeee;
-	color: #333333;
-	width: 520px;
-	margin: 0 auto;
-	-webkit-font-smoothing: antialiased;
-}
-
-#todoapp {
-	background: #fff;
-	padding: 20px;
-	margin-bottom: 40px;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-ms-border-radius: 0 0 5px 5px;
-	-o-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
-}
-
-#todoapp h1 {
-	font-size: 36px;
-	font-weight: bold;
-	text-align: center;
-	padding: 0 0 10px 0;
-}
-
-#todoapp input[type="text"] {
-	width: 466px;
-	font-size: 24px;
-	font-family: inherit;
-	line-height: 1.4em;
-	border: 0;
-	outline: none;
-	padding: 6px;
-	border: 1px solid #999999;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-
-#todoapp input::-webkit-input-placeholder {
-	font-style: italic;
-}
-
-#main {
-	display: none;
-}
-
-#todo-list {
-	margin: 10px 0;
-	padding: 0;
-	list-style: none;
-}
-
-#todo-list li {
-	padding: 18px 20px 18px 0;
-	position: relative;
-	font-size: 24px;
-	border-bottom: 1px solid #cccccc;
-}
-
-#todo-list li:last-child {
-	border-bottom: none;
-}
-
-#todo-list li.done label {
-	color: #777777;
-	text-decoration: line-through;
-}
-
-#todo-list li .destroy {
-	display: none;
-	position: absolute;
-	top: 20px;
-	right: 10px;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
-}
-
-#todo-list li:hover .destroy {
-	display: block;
-}
-
-#todo-list li.editing {
-	border-bottom: none;
-	margin-top: -1px;
-	padding: 0;
-}
-
-#todo-list li.editing:last-child {
-	margin-bottom: -1px;
-}
-
-#todo-list li.editing .edit {
-	display: block;
-	width: 444px;
-	padding: 13px 15px 14px 20px;
-	margin: 0;
-}
-
-#todo-list li.editing .view {
-	display: none;
-}
-
-#todo-list li .view label {
-	word-break: break-word;
-}
-
-#todo-list li .edit {
-	display: none;
-}
-
-#todoapp footer {
-	display: none;
-	margin: 0 -20px -20px -20px;
-	overflow: hidden;
-	color: #555555;
-	background: #f4fce8;
-	border-top: 1px solid #ededed;
-	padding: 0 20px;
-	line-height: 37px;
-	-webkit-border-radius: 0 0 5px 5px;
-	-moz-border-radius: 0 0 5px 5px;
-	-ms-border-radius: 0 0 5px 5px;
-	-o-border-radius: 0 0 5px 5px;
-	border-radius: 0 0 5px 5px;
-}
-
-#clear-completed {
-	display: none;
-	float: right;
-	line-height: 20px;
-	text-decoration: none;
-	background: rgba(0, 0, 0, 0.1);
-	color: #555555;
-	font-size: 11px;
-	margin-top: 8px;
-	margin-bottom: 8px;
-	padding: 0 10px 1px;
-	cursor: pointer;
-	-webkit-border-radius: 12px;
-	-moz-border-radius: 12px;
-	-ms-border-radius: 12px;
-	-o-border-radius: 12px;
-	border-radius: 12px;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-}
-
-#clear-completed:hover {
-	background: rgba(0, 0, 0, 0.15);
-	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-}
-
-#clear-completed:active {
-	position: relative;
-	top: 1px;
-}
-
-#todo-count span {
-	font-weight: bold;
-}
-
-#instructions {
-	margin: 10px auto;
-	color: #777777;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-
-#instructions a {
-	color: #336699;
-}
-
-#credits {
-	margin: 30px auto;
-	color: #999;
-	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
-	text-align: center;
-}
-
-#credits a {
-	color: #888;
-}
\ No newline at end of file

architecture-examples/jquery/index.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>jQuery - TodoMVC</title>
-	<link rel="stylesheet" href="css/app.css">
+	<link rel="stylesheet" href="../../assets/base.css">
 </head>
 <body>
 	<div id="todoapp">

architecture-examples/jquery/js/app.js

@@ -97,6 +97,7 @@ jQuery(function($) {
 					todos.splice( l, 1 );
 				}
 			}
+			App.$toggleAll.attr( 'checked', false );
 			App.render();
 		},
 		// Accepts an element from inside the ".item" div and returns the corresponding todo in the todos array.
@@ -110,16 +111,13 @@ jQuery(function($) {
 			});
 		},
 		create: function(e) {
-			if ( e.which !== App.ENTER_KEY ) {
-				return;
-			}
 			var $input = $(this),
-				inputVal = $input.val();
-			if ( !inputVal ) {
+				val = $.trim( $input.val() );
+			if ( e.which !== App.ENTER_KEY || !val ) {
 				return;
 			}
 			App.todos.push({
-				title: inputVal,
+				title: val,
 				id: Utils.uuid(),
 				done: false
 			});
@@ -143,9 +141,13 @@ jQuery(function($) {
 		update: function() {
 			var val = $(this).removeClass('editing').val();
 			App.getTodo( this, function(i) {
-				this.todos[i].title = val;
+				if ( val ) {
+					this.todos[i].title = val;
+				} else {
+					this.todos.splice( i, 1 );
+				}
+				this.render();
 			});
-			App.render();
 		},
 		destroy: function() {
 			App.getTodo( this, function(i) {