dcneiner · April 16, 2013 20:21
diff --git a/1-jq-uk-advanced.md b/1-jq-uk-advanced.md
diff --git a/2-helpful-links.md b/2-helpful-links.md
diff --git a/3-additional-resources.md b/3-additional-resources.md
diff --git a/events-traversal.js b/events-traversal.js
 (function ( $, lesson ){

 lesson.eventsTraversal = {

 	exercise_0: function () {
 		// This is an example exercise. Use addClass to add "sample"
 		// to the HTML element
 		$( "html" ).addClass( "sample" );
 	},

 	exercise_1: function () {
 		// When the the .delete span is clicked, it should remove
 		// the parent li from the list. Use a single delegated event to accomplish this.
 		// After removing this item, trigger a custom "itemremoved" event on the `ul`
 		$( document ).on( "click", ".delete", function ( e ) {
 			var $li = $( this ).closest( "li" ),
 				$ul = $li.closest( "ul" );

 			$li.remove();
 			$ul.trigger( "itemremoved" );
 		});
 	},

 	exercise_2: function () {
 		// When the text box gains/loses focus, it should add/remove a "focus" class.
 		// Use delegated events to accomplish this
 		$( document ).on( "focusin focusout", "input[type=text]", function ( e ) {
 			$( this ).toggleClass( "focus", e.type === "focusin" );
 		});
 	},

 	exercise_3: function () {
 		// When the form is submitted, use the contents of the input to create a new todo
 		// If the contents are blank, nothing should happen
 		// After adding the item, trigger a custom event "itemadded" on the `ul`
 		// After adding the item, clear out the field and focus back on the field.
 		$( document ).on( "submit", "form", function ( e ) {
 			e.preventDefault();

 			var $form = $( this ),
 				$input = $form.find( "input[type=text]" ),
 				$ul = $form.closest( ".todo-list" ).find( "ul" ),
 				val = $input.val();

 			if ( !val ) {
 				return;
 			}

 			var html = "<li>" + val + " <span class='delete'>[X]</span></li>";

 			$ul.append( html );
 			$ul.trigger( "itemadded" );
 			$input.val( "" ).focus();


 		});
 	},

 	exercise_4: function () {
 		// Listen for the "itemadded/itemremoved" events
 		// and update the item count
 		$( document ).on( "itemadded itemremoved", ".todo-list", function () {
 			var $todoList = $( this ),
 				$ul = $todoList.find( "ul" ),
 				$count = $todoList.find( ".count" ),
 				count = $ul.children().length;

 			$count.html( count );
 		});
 	},

 	exercise_5: function () {
 		// Return a function that could be used as a custom filter callback
 		// It should test the text content of the element to see if it contains
 		// the word "Event"
 		return function ( i, el ) {
 			return /Event/.test( $( el ).text() );
 		};
 	}
 };

 }( jQuery, window.lesson = window.lesson || {} ));
diff --git a/minimize-setup.css b/minimize-setup.css
 .clear-list { display: none; }
 .has-todos .clear-list { display: block; }
diff --git a/minimize-setup.js b/minimize-setup.js
 (function ( $, lesson ){

 lesson.minimizeSetup = {

 	exercise_1: function () {
 		/*
 			Using a beacon event AND a one time initialization method,
 			setup the todo list as the user interacts with it

 			To setup the todo list, call "todoList()" on the jQuery wrapped element
 			Ex: $el.todoList() or $( domElement ).todoList()
 		*/
 		$( document ).on( "focusin", ".todo-list:not(.is-ready)", function () {
 			var $list = $( this );
 				// $list = $input.closest( ".todo-list" );

 			$list.todoList().addClass( "is-ready" );

 			$list.find( "input[type=text]" ).trigger( "focusin" );
 		});
 	},

 	exercise_2: function ( $todoListRoot ) {
 		/*
 			This exercise will be called each time todoList plugin is set up
 			Use this method to setup the state handling of the "clear" button 
 			
 			Initial state should be handled via CSS!
 			
 			**Desired Functionality:**
 			The clear button should only be visible when there are items in the list
 			Remember, itemadded/itemremoved events are still triggered when the list is modified
 		*/

 		$todoListRoot.on( "itemadded itemremoved", function () {
 			var count = $todoListRoot.find( "li" ).length;
 			$todoListRoot.toggleClass( "has-todos", count > 0 );
 		});

 	},

 	exercise_3: function ( $todoListRoot ) {
 		/*
 			This exercise will be *also* be called each time todoList plugin is set up
 			Use this method to setup the clearing the list when the clear button is pressed 

 			**Desired Functionality:**
 			The clear button should remove all items, and fire a single itemremoved event
 		*/

 		$todoListRoot.on( "click", ".clear-list", function () {
 			$todoListRoot.find( "li" ).remove();
 			$todoListRoot.trigger( "itemremoved" );
 		});

 	}
 };


 }( jQuery, window.lesson = window.lesson || {} ));
	(function ( $, lesson ){

	lesson.eventsTraversal = {

	exercise_0: function () {
	// This is an example exercise. Use addClass to add "sample"
	// to the HTML element
	$( "html" ).addClass( "sample" );
	},

	exercise_1: function () {
	// When the the .delete span is clicked, it should remove
	// the parent li from the list. Use a single delegated event to accomplish this.
	// After removing this item, trigger a custom "itemremoved" event on the `ul`
	$( document ).on( "click", ".delete", function ( e ) {
	var $li = $( this ).closest( "li" ),
	$ul = $li.closest( "ul" );

	$li.remove();
	$ul.trigger( "itemremoved" );
	});
	},

	exercise_2: function () {
	// When the text box gains/loses focus, it should add/remove a "focus" class.
	// Use delegated events to accomplish this
	$( document ).on( "focusin focusout", "input[type=text]", function ( e ) {
	$( this ).toggleClass( "focus", e.type === "focusin" );
	});
	},

	exercise_3: function () {
	// When the form is submitted, use the contents of the input to create a new todo
	// If the contents are blank, nothing should happen
	// After adding the item, trigger a custom event "itemadded" on the `ul`
	// After adding the item, clear out the field and focus back on the field.
	$( document ).on( "submit", "form", function ( e ) {
	e.preventDefault();

	var $form = $( this ),
	$input = $form.find( "input[type=text]" ),
	$ul = $form.closest( ".todo-list" ).find( "ul" ),
	val = $input.val();

	if ( !val ) {
	return;
	}

	var html = "<li>" + val + " <span class='delete'>[X]</span></li>";

	$ul.append( html );
	$ul.trigger( "itemadded" );
	$input.val( "" ).focus();


	});
	},

	exercise_4: function () {
	// Listen for the "itemadded/itemremoved" events
	// and update the item count
	$( document ).on( "itemadded itemremoved", ".todo-list", function () {
	var $todoList = $( this ),
	$ul = $todoList.find( "ul" ),
	$count = $todoList.find( ".count" ),
	count = $ul.children().length;

	$count.html( count );
	});
	},

	exercise_5: function () {
	// Return a function that could be used as a custom filter callback
	// It should test the text content of the element to see if it contains
	// the word "Event"
	return function ( i, el ) {
	return /Event/.test( $( el ).text() );
	};
	}
	};

	}( jQuery, window.lesson = window.lesson \|\| {} ));
	.clear-list { display: none; }
	.has-todos .clear-list { display: block; }
	(function ( $, lesson ){

	lesson.minimizeSetup = {

	exercise_1: function () {
	/*
	Using a beacon event AND a one time initialization method,
	setup the todo list as the user interacts with it

	To setup the todo list, call "todoList()" on the jQuery wrapped element
	Ex: $el.todoList() or $( domElement ).todoList()
	*/
	$( document ).on( "focusin", ".todo-list:not(.is-ready)", function () {
	var $list = $( this );
	// $list = $input.closest( ".todo-list" );

	$list.todoList().addClass( "is-ready" );

	$list.find( "input[type=text]" ).trigger( "focusin" );
	});
	},

	exercise_2: function ( $todoListRoot ) {
	/*
	This exercise will be called each time todoList plugin is set up
	Use this method to setup the state handling of the "clear" button

	Initial state should be handled via CSS!

	Desired Functionality:
	The clear button should only be visible when there are items in the list
	Remember, itemadded/itemremoved events are still triggered when the list is modified
	*/

	$todoListRoot.on( "itemadded itemremoved", function () {
	var count = $todoListRoot.find( "li" ).length;
	$todoListRoot.toggleClass( "has-todos", count > 0 );
	});

	},

	exercise_3: function ( $todoListRoot ) {
	/*
	This exercise will be also be called each time todoList plugin is set up
	Use this method to setup the clearing the list when the clear button is pressed

	Desired Functionality:
	The clear button should remove all items, and fire a single itemremoved event
	*/

	$todoListRoot.on( "click", ".clear-list", function () {
	$todoListRoot.find( "li" ).remove();
	$todoListRoot.trigger( "itemremoved" );
	});

	}
	};


	}( jQuery, window.lesson = window.lesson \|\| {} ));