Skip to content

Instantly share code, notes, and snippets.

@trystant

trystant/index.css

Created June 23, 2017 14:07
Show Gist options
  • Save trystant/9cebbb4a1b66ce3cdc2c10715f1e0f6d to your computer and use it in GitHub Desktop.
Save trystant/9cebbb4a1b66ce3cdc2c10715f1e0f6d to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Shopping List created by [email protected] - https://repl.it/IxcC/55
Raw
index.css
* {
box-sizing: border-box;
}
main {
padding: 50px;
min-width: 250px;
}
h1 {
text-align: left;
}
.js-item-container {
border: 1px solid gray;
border-radius: 2px;
padding: 20px;
padding-bottom: 14px;
margin-top: 20px;
}
.js-item-name {
color: gray;
font-style: italic;
font-size: 20px;
padding-bottom: 16px;
}
.js-item-controls {
padding-bottom: 7px;
}
.js-check-item {
margin-right: 5px;
}
.check-item {
text-decoration: line-through;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Shopping List</title>
<!-- Responsive viewport tag, tells small screens that it's responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Interactive Shopping List">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!--Stylesheets-->
<!-- Normalize.css, reset file -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.css" rel="stylesheet">
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<main role='main'>
<h1>Shopping List</h1>
<br>
<form id='add-Frm' >
<label for="add-item">Add an item </label>
<input id="add-item" name="add-item" type="text" placeholder="e.g., broccoli" required />
<input id='add-Btn' type="submit" value="Add item" />
<br>
<div class="js-container-area"></div>
</form>
</main>
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
$(function(){
var items = [];
$("#add-item").focus();
// jQuery methods
$('#add-Frm').submit (function (event) {
event.preventDefault();
var newItem = $('#add-item').val();
if (items.indexOf(newItem) >= 0) {
alert("You already have " + newItem + " on your list!")
$('#add-item').val("");
// $('#add-item').focus(); // this doesn't work
document.getElementById("add-item").focus();
return;
}
items.push(newItem);
$('#add-item').val("");
$('.js-container-area').append(
'<div class="js-item-container">' +
'<div class="js-item-name">' + newItem + '</div>' +
'<div class="js-item-controls">' +
'<input class="js-check-item" type="submit" value="check" />' +
'<input class="js-delete-item" type="submit" value="delete" />' +
'</div></div>'
);
document.getElementById("add-item").focus();
});
// Event Delegation - check parent for added <div>'s events
$('.js-container-area').on('click', '.js-delete-item', function(event) {
event.preventDefault();
var item = $(this).closest('.js-item-container').text();
var ndx = items.indexOf(item);
if (ndx > -1) {
items.splice(ndx, 1);
}
$(this).closest('.js-item-container').remove();
document.getElementById("add-item").focus();
});
$('.js-container-area').on('click', '.js-check-item', function(event) {
event.preventDefault();
if ($(this).closest('.js-item-container').find('.js-item-name').is(".check-item")) {
$(this).closest('.js-item-container').find('.js-item-name').removeClass("check-item");
}
else {
$(this).closest('.js-item-container').find('.js-item-name').addClass("check-item");
document.getElementById("add-item").focus();
}
});
});
// placed inside .container-area
// <div class="js-item-container">
// <div class="js-item-name">milk</div>
// <div class="js-item-controls">
// <input class="js-check-item" type="submit" value="check" />
// <input class="js-delete-item" type="submit" value="delete" />
// </div>
// </div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment