Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Final Shopping Cart #6

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Final Shopping Cart #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6065c04
added pseudo code
RedRobster66 Jan 21, 2016
f4ee433
fixed the format
RedRobster66 Jan 22, 2016
79f6dbb
attempted sub-total function
RedRobster66 Jan 24, 2016
be6aafb
final version
RedRobster66 Jan 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
input {
width: 100px;
}

section~label {
width: 100px;

footer {
float: left;
margin-top: 20px;
}

.Creator {
padding-top: 20px;
}

}
#item-list {
clear: both;
}

.item-row {
clear: both;
max-width: 1920px;
}

.item-name{
width: 200px;

}

.item-price {
width: 200px;
}

.item-qty {
width: 400px;
}

.item-subtotal {
width: 100px;
}

.Creator {
float: left;
clear: both;
}

.prodName {
margin-right: 50px;

}

.prodPrice {
margin-right: 50px;

}

#updateTotal {
background-color: lightgreen;
float: right;
width: 150px;
height: 35px;
border-radius: 5px;
margin-right: 40px;
}



}
46 changes: 44 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,55 @@
<meta name="description" content="">
<meta name="author" content="">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/application.js"></script>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>

<section class = "container">
<header>
<h1 >Shopping Cart</h1>
</header>

<div id = "item-list">
<div class = "item-row row">
<div class = "item-name col-xs-3">Salmon</div>
<div class = "item-price col-xs-3">$60.00</div>
<div class = "item-sub col-xs-3">
<label>QTY</label>
<input class = "orderQty"></input>
<button class = "cancel">Cancel</button>
</div>
<div class = "item-tot col-xs-3">$0.00</div><br>
</div>
<div class = "item-row row">
<div class = "item-name col-xs-3">Tuna</div>
<div class = "item-price col-xs-3">$50.00</div>
<div class = "item-sub col-xs-3">
<label>QTY</label>
<input class = "orderQty"></input>
<button class = "cancel">Cancel</button>
</div>
<div class = "item-tot col-xs-3">$0.00</div><br>
</div>
</div>


<div class = "Creator">
<input class = "prodName" placeholder = "Product Name"></input>
<input class = "prodPrice" placeholder = "Price ($)//Unit"></input>
<button id = "newItemCreator">Create</button><br>
</div><br><br>

<button id = "updateTotal">Calculate Prices</button>

<footer>
<h1>Total Price:</h1>
<h1 id = "totalPrice">0.00</h1>
</footer>
</section>

</body>
</html>
63 changes: 63 additions & 0 deletions js/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@

$(document).ready (function() {

function createRecord () {
var itemNew = $('.prodName').val();
var priceNew = $('.prodPrice').val();

if ($.isNumeric(priceNew) == false) {
alert('Price must be a numerical value.');
} else if (itemNew == '') {
alert('Item name must be filled.');
} else {
priceNew = parseFloat(priceNew).toFixed(2);

var newItem = '' +
'<div class = "item-row row">' +
'<div class = "item-name col-xs-3">' + itemNew + '</div>' +
'<div class = "item-price col-xs-3">$' + priceNew + '</div>' +
'<div class = "item-sub col-xs-3">' +
'<label>QTY</label>' +
'<input class = "orderQty"></input>' +
'<button class = "cancel">Cancel</button>' +
'</div>' +
'<div class = "item-tot col-xs-3">$0.00</div><br>' +
'</div>';

$('#item-list').prepend(newItem);
}

$('button.cancel').off().on('click', function () {
$(this).parent().parent().remove();
});
};

function calcItemTotal () {
var sumAllTotal = 0;
$('.item-row').each(function(index,element) {
console.log(this);
var qty = $(this).find('.orderQty').val();
var priceStr = $(this).find('.item-price').text().substring(1);
var price = parseFloat(priceStr).toFixed(2);
var subTotal = price * qty;
console.log(qty, priceStr, price, subTotal);
$(this).find('.item-tot').text('$' + subTotal);
sumAllTotal += subTotal;
});
$('#totalPrice').text('$' + sumAllTotal.toFixed(2));
}


$('#updateTotal').on('click', calcItemTotal);

$('#newItemCreator').on('click',createRecord);

$('button.cancel').off().on('click', function () {
$(this).parent().parent().remove();
});


});



53 changes: 53 additions & 0 deletions js/sample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
$(document).ready(function(){

var returnSubtotalPrice=function(price,quantity,i){
var itemSubtotalPrices=$(".item-subtotal");
$(itemSubtotalPrices[i]).text("$"+(price*quantity).toFixed(2))};

var returnTotalPrice=function(){
var itemPrices=$(".item-price");
var itemQuantities=$(".quantity");
var itemLength=itemPrices.length;
var totalPrice=0;
for(var i=0;i<itemLength;i++){
var price=$(itemPrices[i]).text().replace("$","");
if($.isNumeric(itemQuantities[i].value)){
var quantity=itemQuantities[i].value;
$(itemQuantities[i]).css("color","black")
}else{
var quantity=0;

$("#total-price").after("");$(itemQuantities[i]).css("color","red")}

returnSubtotalPrice(price,quantity,i);
totalPrice+=price*quantity}

$("#total-price").text("$"+totalPrice.toFixed(2))};

var createItem=function(){
var itemName=$("#new-item-name").val();
var itemUnitPrice=$("#new-item-unit-price").val();
if($.isNumeric(itemUnitPrice)==false)
{alert("Unit price must be a number")}else if(itemName=="")
{alert("Item name cannot be empty")
}else{
itemUnitPrice=Number(itemUnitPrice).toFixed(2);
var newItem='<div class="item row" style="display:none;">
<div class="item-name col-xs-4">'+itemName+'</div>
<div class="item-price col-xs-3">$'+itemUnitPrice+'</div>
<div class="item-qty col-xs-3">
<label>QTY</label><input class="quantity" value="0">
<button class="cancel">Cancel</button></div>
<div class="item-subtotal col-xs-2">$0.00</div></div>';

$(newItem).prependTo($("#items-list")).slideDown("slow")}};

$("#calc-prices-button").click(function(){
returnTotalPrice()
});

$(document).delegate(".quantity","focusout",function(){returnTotalPrice()});

$("#new-item-create").click(function(){createItem()});

$(document).delegate(".cancel","click",function(){$(this).parent().parent().fadeOut("slow",function(){$(this).html("");returnTotalPrice()})})});