maxplomer/jquery_todo_app.html

## jquery_todo_app.html
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>

<h1>Todo List</h1>

<table class="todo-list">
  <th style="padding-right: 30px;">Todo</th>
  <th>Date</th>
  <th style="display:none;">Note</th>
<tr>
  <td style="padding-right: 30px;">Vet appt for Cat</td>
  <td>tomorrow</td>
  <td style="display:none;">sennecy needs help</td>
</tr>
</table>

<br><br>
<form id="todo-list-form">

  <label>
    I need to:
    <input type="text" id="thing-need-todo">
  </label>

  <br><br>
  <label>
    By:
    <input type="text" id="date-need-todo">
  </label>

  <br><br>
  <label>
    Note:
    <input type="text" id="note-need-todo">
  </label>

  <br><br>
  <input type="submit" value="Add to list">

</form>

<script language="JavaScript">

(function () {

  var $form = $("#todo-list-form");
  $form.on("submit", function (event) {
    event.preventDefault(); //stop Post request sent with form to same page

    var $input = $("#thing-need-todo"); //capture tags with id cool_thing
    var thingNeedTodo = $input.val(); //Get current value of first element in set
    $input.val(""); //set input field to blank

    var $input = $("#date-need-todo");
    var dateNeedTodo = $input.val();
    $input.val("");

    var $input = $("#note-need-todo");
    var noteNeedTodo = $input.val();
    $input.val("");

    //using hacky way to add clickCallback to new todolist rows
    var $todoRow = $(
      "<tr><td>" + thingNeedTodo + "</td><td>" + dateNeedTodo
      + "</td><td style=\"display:none;\">" +
      noteNeedTodo + "</td></tr>"
    );

    $todoRow.on("click", clickCallback)

    $("table.todo-list").append($todoRow);
    //.append() inserts content as last child of each element in the jQuery collection
  });

  var $listItems = $("tr");
  $listItems.on("click", clickCallback ); //only for todo rows that are already there

  function clickCallback (event) {
    var currentTarget = event.currentTarget;
    var $currentTarget = $(currentTarget);

    // alert($currentTarget.text()); //if want all fields in alert

    //want to only output the hidden note :)
    var note = $currentTarget.children()
    //quick fix to avoid alerting when click title heading
    if (note[0].textContent != "Todo" && note[1].textContent != "Date") {
      alert( note[2].textContent );
    }
  }


})();

</script>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
	</head>
	<body>

	<h1>Todo List</h1>

	<table class="todo-list">
	<th style="padding-right: 30px;">Todo</th>
	<th>Date</th>
	<th style="display:none;">Note</th>
	<tr>
	<td style="padding-right: 30px;">Vet appt for Cat</td>
	<td>tomorrow</td>
	<td style="display:none;">sennecy needs help</td>
	</tr>
	</table>

	<br><br>
	<form id="todo-list-form">

	<label>
	I need to:
	<input type="text" id="thing-need-todo">
	</label>

	<br><br>
	<label>
	By:
	<input type="text" id="date-need-todo">
	</label>

	<br><br>
	<label>
	Note:
	<input type="text" id="note-need-todo">
	</label>

	<br><br>
	<input type="submit" value="Add to list">

	</form>

	<script language="JavaScript">

	(function () {

	var $form = $("#todo-list-form");
	$form.on("submit", function (event) {
	event.preventDefault(); //stop Post request sent with form to same page

	var $input = $("#thing-need-todo"); //capture tags with id cool_thing
	var thingNeedTodo = $input.val(); //Get current value of first element in set
	$input.val(""); //set input field to blank

	var $input = $("#date-need-todo");
	var dateNeedTodo = $input.val();
	$input.val("");

	var $input = $("#note-need-todo");
	var noteNeedTodo = $input.val();
	$input.val("");

	//using hacky way to add clickCallback to new todolist rows
	var $todoRow = $(
	"<tr><td>" + thingNeedTodo + "</td><td>" + dateNeedTodo
	+ "</td><td style=\"display:none;\">" +
	noteNeedTodo + "</td></tr>"
	);

	$todoRow.on("click", clickCallback)

	$("table.todo-list").append($todoRow);
	//.append() inserts content as last child of each element in the jQuery collection
	});

	var $listItems = $("tr");
	$listItems.on("click", clickCallback ); //only for todo rows that are already there

	function clickCallback (event) {
	var currentTarget = event.currentTarget;
	var $currentTarget = $(currentTarget);

	// alert($currentTarget.text()); //if want all fields in alert

	//want to only output the hidden note :)
	var note = $currentTarget.children()
	//quick fix to avoid alerting when click title heading
	if (note[0].textContent != "Todo" && note[1].textContent != "Date") {
	alert( note[2].textContent );
	}
	}



	})();

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