dtstanley/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Shopping List</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">

</head>
<body>

  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" class="js-shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">
      <li>
        <span class="shopping-item">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item shopping-item__checked">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

## index.js
// your code here!
// and remember you'll need to link to this file
// in a <script> element in index.html [DT:done]


//Global Variables/Constants will be here
  const SHOPPING_LIST_ELEMENT_CLASS = '.shopping-list';
  const shoppingListItemsString = '<li>hello world</li>';

//Functions will be defined here


function renderShoppingList(){
  //A shopping list should be rendered to the page [DT:done for me already?]
  console.log(" 'renderShoppingList' ran");
  	// For each item in STORE, generate a string representing an <li> with:
      //the item name rendered as inner text
      //the item's index in the STORE set as a data attribute on the <li
      //the item's checked state (true or false) rendered as the presence or absence of a CSS class for indicating checked items (specifically, .shopping-item__checked from index.css)
      //Join together the individual item strings into one long string
	    //Insert the <li>s string inside the .js-shopping-list <ul> in the DOM.
}

function newGroceryItemSubmit(){
  // listen for users adding a new item to the list: by entering text and hitting "Return" or clicking the "Add item" button
  //then add grocery item to a list <li> and render list
  $("#js-shopping-list-form").submit(function( event ) {
     // this stops the default form submission behavior
  event.preventDefault();

  alert( "Grocery item added." );
  console.log(" 'newGroceryItemSubmit' ran and Grocery item added");
});
}
function groceryItemCheckClicked(){
  // listen for users checking/unchecking list items, and
  // render them checked/unchecked accordingly
  console.log('`groceryItemCheckClicked` ran');

}

function groceryItemDeleteClicked(){
  // Listen for when users want to delete an item and
  // delete it
  console.log('`groceryItemDeleteClicked` ran')
}
function shoppingListCallback(){
  //Callbacks go here?
  renderShoppingList();
  newGroceryItemSubmit();
  groceryItemCheckClicked();
  groceryItemDeleteClicked();

}
$(shoppingListCallback);


## main.css
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button, input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list > li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Shopping List</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<link rel="stylesheet" href="main.css">

	</head>
	<body>

	<div class="container">
	<h1>Shopping List</h1>

	<form id="js-shopping-list-form">
	<label for="shopping-list-entry">Add an item</label>
	<input type="text" name="shopping-list-entry" class="js-shopping-list-entry" placeholder="e.g., broccoli">
	<button type="submit">Add item</button>
	</form>

	<ul class="shopping-list">
	<li>
	<span class="shopping-item">apples</span>
	<div class="shopping-item-controls">
	<button class="shopping-item-toggle">
	<span class="button-label">check</span>
	</button>
	<button class="shopping-item-delete">
	<span class="button-label">delete</span>
	</button>
	</div>
	</li>
	<li>
	<span class="shopping-item">oranges</span>
	<div class="shopping-item-controls">
	<button class="shopping-item-toggle">
	<span class="button-label">check</span>
	</button>
	<button class="shopping-item-delete">
	<span class="button-label">delete</span>
	</button>
	</div>
	</li>
	<li>
	<span class="shopping-item shopping-item__checked">milk</span>
	<div class="shopping-item-controls">
	<button class="shopping-item-toggle">
	<span class="button-label">check</span>
	</button>
	<button class="shopping-item-delete">
	<span class="button-label">delete</span>
	</button>
	</div>
	</li>
	<li>
	<span class="shopping-item">bread</span>
	<div class="shopping-item-controls">
	<button class="shopping-item-toggle">
	<span class="button-label">check</span>
	</button>
	<button class="shopping-item-delete">
	<span class="button-label">delete</span>
	</button>
	</div>
	</li>
	</ul>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	// your code here!
	// and remember you'll need to link to this file
	// in a <script> element in index.html [DT:done]


	//Global Variables/Constants will be here
	const SHOPPING_LIST_ELEMENT_CLASS = '.shopping-list';
	const shoppingListItemsString = '<li>hello world</li>';

	//Functions will be defined here


	function renderShoppingList(){
	//A shopping list should be rendered to the page [DT:done for me already?]
	console.log(" 'renderShoppingList' ran");
	// For each item in STORE, generate a string representing an <li> with:
	//the item name rendered as inner text
	//the item's index in the STORE set as a data attribute on the <li
	//the item's checked state (true or false) rendered as the presence or absence of a CSS class for indicating checked items (specifically, .shopping-item__checked from index.css)
	//Join together the individual item strings into one long string
	//Insert the <li>s string inside the .js-shopping-list <ul> in the DOM.
	}

	function newGroceryItemSubmit(){
	// listen for users adding a new item to the list: by entering text and hitting "Return" or clicking the "Add item" button
	//then add grocery item to a list <li> and render list
	$("#js-shopping-list-form").submit(function( event ) {
	// this stops the default form submission behavior
	event.preventDefault();

	alert( "Grocery item added." );
	console.log(" 'newGroceryItemSubmit' ran and Grocery item added");
	});
	}
	function groceryItemCheckClicked(){
	// listen for users checking/unchecking list items, and
	// render them checked/unchecked accordingly
	console.log('`groceryItemCheckClicked` ran');

	}

	function groceryItemDeleteClicked(){
	// Listen for when users want to delete an item and
	// delete it
	console.log('`groceryItemDeleteClicked` ran')
	}
	function shoppingListCallback(){
	//Callbacks go here?
	renderShoppingList();
	newGroceryItemSubmit();
	groceryItemCheckClicked();
	groceryItemDeleteClicked();

	}
	$(shoppingListCallback);
	* {
	box-sizing: border-box;
	}

	body {
	font-family: 'Roboto', sans-serif;
	}

	button, input[type="text"] {
	padding: 5px;
	}

	button:hover {
	cursor: pointer;
	}

	#shopping-list-item {
	width: 250px;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	}

	.shopping-list {
	list-style: none;
	padding-left: 0;
	}

	.shopping-list > li {
	margin-bottom: 20px;
	border: 1px solid grey;
	padding: 20px;
	}

	.shopping-item {
	display: block;
	color: grey;
	font-style: italic;
	font-size: 20px;
	margin-bottom: 15px;
	}

	.shopping-item__checked {
	text-decoration: line-through;
	}