joncancode/jQuery Practice

## jQuery Practice
<!DOCTYPE html>
<html>
<head>
  <title>A Few of My Favorite Things</title>

<style>
  .complete-task {
  }

  .completed {

  }

</style>

</head>
<body>
  <h1>jQuery Practice</h1>

  <h2>Favorite Things</h2>
  <ul id="fav-list">
    <li class="fav-thing">Dog Bites</li>
    <li class="fav-thing">Bee Stings</li>
    <li class="fav-thing">Feeling Bad</li>
  </ul>

  <form>
    <input id="new-thing" />
    <input id="new-thing-button" type="submit" value="Create new thing"></submit>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>

  /* Independent Practice
Making a favorites list: jQuery
You'll add the ability to complete tasks in your favorite things list:
- Using jQuery, add a "complete task" link at the end of each to-do item (i.e. each "favorite thing")
- When clicked, the link will cross out the current item (hint: add a class to the list that sets the text-decoration to line-through)
- Each new item added by the user needs to also have the "complete task" link at the end
*/

function addToList($list, thing) {
  let $thingLi = $('<li>');
  $thingLi.text(thing);
  $list.append($thingLi);
}

  let $thingList = $('#fav-list');
  let $button = $('#new-thing-button');
  let $newThingInput = $('#new-thing');

  $button.on('click', function(event) {
    event.preventDefault();
    let newThing = $newThingInput.val();
    if (newThing === '') {
      alert('You must type in a value!');
    } else {
      addToList($thingList, newThing);
      $newThingInput.val('');
    }
  });


  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>A Few of My Favorite Things</title>

	<style>
	.complete-task {
	}

	.completed {

	}

	</style>

	</head>
	<body>
	<h1>jQuery Practice</h1>

	<h2>Favorite Things</h2>
	<ul id="fav-list">
	<li class="fav-thing">Dog Bites</li>
	<li class="fav-thing">Bee Stings</li>
	<li class="fav-thing">Feeling Bad</li>
	</ul>

	<form>
	<input id="new-thing" />
	<input id="new-thing-button" type="submit" value="Create new thing"></submit>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>

	/* Independent Practice
	Making a favorites list: jQuery
	You'll add the ability to complete tasks in your favorite things list:
	- Using jQuery, add a "complete task" link at the end of each to-do item (i.e. each "favorite thing")
	- When clicked, the link will cross out the current item (hint: add a class to the list that sets the text-decoration to line-through)
	- Each new item added by the user needs to also have the "complete task" link at the end
	*/

	function addToList($list, thing) {
	let $thingLi = $('<li>');
	$thingLi.text(thing);
	$list.append($thingLi);
	}

	let $thingList = $('#fav-list');
	let $button = $('#new-thing-button');
	let $newThingInput = $('#new-thing');

	$button.on('click', function(event) {
	event.preventDefault();
	let newThing = $newThingInput.val();
	if (newThing === '') {
	alert('You must type in a value!');
	} else {
	addToList($thingList, newThing);
	$newThingInput.val('');
	}
	});


	</script>
	</body>
	</html>