Skip to content

Instantly share code, notes, and snippets.

@dtstanley

dtstanley/index.html

Forked from anonymous/index.html
Created July 5, 2017 20:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dtstanley/de1e1593d769a21118cedbd066313236 to your computer and use it in GitHub Desktop.
Save dtstanley/de1e1593d769a21118cedbd066313236 to your computer and use it in GitHub Desktop.
Download ZIP
shopping-list-chalg1 created by dtstanley - https://repl.it/Ht71/1158
Raw
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>
Raw
index.js
// your code here!
// and remember you'll need to link to this file
// in a <script> element in index.html
const SHOPPING_LIST_ELEMENT_CLASS = '.shopping-list';
// const shoppingListItemsString = generateShoppingItemsString();
//Functions will be defined here
/*function generateItemElement(item, itemIndex) {
// generate a string representing an `<li>
// for each list item.
// set a data attribute to store item's index index
// in the shopping list store
// correctly set the item name
// correctly set the `.shopping-item__checked` class
// on the right part of the item
return `<li>${item.name}</li>`;
}
*/
/* function generateShoppingItemsString(shoppingList){
console.log("Generating shopping list element");
//generate an <li> with the right attributes
//for each item in the list.
const items = shoppingList.map((item, index) => generateItemElement(item, index));
// correctly set the item name
item = $('.js-shopping-list-entry').val();
// correctly set the `.shopping-item__checked` class
// on the right part of the item
return items.join();
}
*/
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();
// STORE.push({name: itemName, checked:false});
const listItem = $('.js-shopping-list-entry').val();
$('.shopping-list').append(
`<li>
<span class="shopping-item">${listItem}</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>`
);
$('.js-shopping-list-entry').val("");
// 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
$('.shopping-list').on('click', '.shopping-item-toggle', function(event){
$(this).closest('li').find('.shopping-item').toggleClass('shopping-item__checked');
});
console.log('`groceryItemCheckClicked` ran');
}
function groceryItemDeleteClicked(){
// Listen for when users want to delete an item and
// delete it
$('.shopping-list').on ('click', '.shopping-item-delete',function(event){
$(this).closest('li').remove();
});
console.log('`groceryItemDeleteClicked` ran');
}
function shoppingListCallback(){
//Callbacks go here?
// renderShoppingList();
newGroceryItemSubmit();
groceryItemCheckClicked();
groceryItemDeleteClicked();
}
$(shoppingListCallback);
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment