joncancode/DOM practice

## DOM practice
<!DOCTYPE html>
<html>
<head>
  <title>A Few of My Favorite Things</title>
</head>
<body>
  <h1>Working with the DOM</h1>

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

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


  /* Independent Practice

Making a favorites list: DOM manipulation


- When the user clicks the submit button, take the value they've typed
  into the input box and add it to the list (remember: appendChild)

- Also, when a new item is added to the list, clear the input box.

*/

function addToList(list, newThing) {

}

window.onload = function() {
  // when someone clicks the button...

  // https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
};

/*

Bonus:

When they click submit without typing anything, alert the user
"you must type in a value!"
  (Hint: the `value` property of the input box, before anyone types in it,
  is the empty string.)

*/


  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>A Few of My Favorite Things</title>
	</head>
	<body>
	<h1>Working with the DOM</h1>

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

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


	/* Independent Practice

	Making a favorites list: DOM manipulation


	- When the user clicks the submit button, take the value they've typed
	into the input box and add it to the list (remember: appendChild)

	- Also, when a new item is added to the list, clear the input box.

	*/

	function addToList(list, newThing) {

	}

	window.onload = function() {
	// when someone clicks the button...

	// https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
	};

	/*

	Bonus:

	When they click submit without typing anything, alert the user
	"you must type in a value!"
	(Hint: the `value` property of the input box, before anyone types in it,
	is the empty string.)

	*/


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