Shopping cart

Developer
Jaflo
Size
4,412 Kb
Views
20,240
  1. Shopping cart Previews
  2. Shopping cart HTML Codes
  3. Shopping cart CSS Codes
  4. Shopping cart JS Codes

How do I make an shopping cart?

Shopping cart for rodeo week, not complete yet. What is a shopping cart? How do you make a shopping cart? This script and codes were developed by Jaflo on 12 September 2022, Monday.

Shopping cart Previews
IQ Test

Shopping cart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shopping cart</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #34373e; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color: white; font-size: 16px; overflow-y: scroll;
}
#expand { cursor: pointer;
}
#coolstuff { display: none;
}
#container { width: 100%; max-width: 800px; margin: auto; text-align: center;
}
ul { text-align: left;
}
hr { border-color: white; border-bottom: 0;
}
table { width: 100%; margin: auto; text-align: center;
}
tr { padding: 0; margin: 0; border: 0;
}
td { no-border-top: 1px solid white; padding: 5px 2px;
}
.image { width: 150px;
}
.image > img { width: 100%; background: white; border-radius: 2px; box-shadow: 0 2px 7px rgba(0,0,0,0.4); a-border: 1px solid black;
}
.amount { width: 50px;
}
.amount > input { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color: white; font-size: 16px; background: transparent; border: none; width: 100%; text-align: center; outline: none;
}
.remove { width: 30px;
}
.remove > div { border-radius: 10px; width: 16px; height: 16px; line-height: 16px; padding: 2px; transition: background .3s, border .3s, transform .3s; cursor: pointer; text-align: center; margin: auto; border: 1px solid white;
}
.remove.hey > div { background: red; border-color: red; transform: scale(1.3);
}
.remove:hover > div { background: red; border-color: red;
}
.big { font-size: 2em; font-weight: bold;
}
#checkout { padding: 10px; font-size: 16px; color: white; display: inline-block; margin: 2px; border-radius: 3px; text-align: center; transition: background 0.2s; background: #0a8f6c; cursor: pointer;
}
#checkout > span { width: 0; display: inline-block; overflow: hidden; transition: width .3s; text-align: right;
}
#checkout:hover > span { width: 20px;
}
#footer { opacity: 0.6; border-top: 1px solid white; padding-top: 10px; text-align: center; margin-top: 15px;
}
#footer a { color: white;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container">
<table> <!--<tr style="text-align:center;"> <td>Image</td> <td>Name</td> <td>Price</td> <td>Amount</td> <td>Subtotal</td> <td> </td> </tr>--> <tr class="p"> <td class="image"><img src="http://cdn2.ubergizmo.com/wp-content/uploads/2012/09/ipod-touch-5g.jpg" /></td> <td class="name">iPod touch</td> <td class="price">$299.99</td> <td class="amount"><input type="number" value="1" min="0" /></td> <td class="pricesubtotal"></td> <td class="remove"><div>&times</div></td> </tr> <tr class="p"> <td class="image"><img src="http://lh3.ggpht.com/_sXfqQA9D6CE/S4idRoV5L3I/AAAAAAAAAUg/MGcaKoWqeqI/s320/pens1.jpg" /></td> <td class="name">Pack of 5 pens</td> <td class="price">$4.99</td> <td class="amount"><input type="number" value="3" min="0" /></td> <td class="pricesubtotal"></td> <td class="remove"><div>&times</div></td> </tr> <tr class="p"> <td class="image"><img src="https://image.guim.co.uk/sys-images/Guardian/Pix/audio/video/2012/6/19/1340095553637/Microsoft-Surface-tablet--008.jpg" /></td> <td class="name">Microsoft Surface</td> <td class="price">$599.99</td> <td class="amount"> <input type="number" value="1" min="0" /> </td> <td class="pricesubtotal"></td> <td class="remove"><div>&times</div></td> </tr> <tr class="p"> <td class="image"><img src="http://www.rinogualtieri.it/images/libri1.jpg" /></td> <td class="name">Books</td> <td class="price">$29.99</td> <td class="amount"><input type="number" value="5" min="0" /></td> <td class="pricesubtotal"></td> <td class="remove"><div>&times</div></td> </tr> <tr class="p"> <td class="image"><img src="https://image.guim.co.uk/sys-images/Admin/BkFill/Default_image_group/2013/2/19/1361294379900/Cup-cakes-010.jpg" /></td> <td class="name">Cupcakes</td> <td class="price">$0.99</td> <td class="amount"><input type="number" value="20" min="0" /></td> <td class="pricesubtotal"></td> <td class="remove"><div>&times</div></td> </tr> <tr class="p"> <td class="image"><img src="http://upload.wikimedia.org/wikipedia/en/e/e9/Pok%C3%A9mon_box_art_-_Red_Version.jpg" /></td> <td class="name">Pokémon Red</td> <td class="price">$49.99</td> <td class="amount"><input type="number" value="2" min="0" /></td> <td class="pricesubtotal"></td> <td class="remove"><div>&times</div></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td>Subtotal:</td> <td class="totalpricesubtotal"></td> <td> </td> </tr> <tr> <td style="border-top:1px solid white" colspan="6"><br /> With 5% sales tax <span class="taxval"></span> and <span class="shipping">10</span>$ shipping:<br /> <span class="big">Total: $<span class="realtotal">0</span></span> </td> </tr>
</table> <div id="checkout">Checkout<span> &rarr;</span></div>
<div id="footer"> <ul> <li>Change the amount of stuff and see the subtotal and total change</li> <li>Try to change the amount of items to minus amounts or 0</li> <li>Delete items and see the totals change</li> </ul> <hr /> This is my first entry for this week's <a href="https://codepen.io/tag/rodeo-007">CodePen Pattern Rodeo</a>.<br /> If you like this pen, please heart it :)
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shopping cart - Script Codes CSS Codes

body { background: #34373e; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color: white; font-size: 16px; overflow-y: scroll;
}
#expand { cursor: pointer;
}
#coolstuff { display: none;
}
#container { width: 100%; max-width: 800px; margin: auto; text-align: center;
}
ul { text-align: left;
}
hr { border-color: white; border-bottom: 0;
}
table { width: 100%; margin: auto; text-align: center;
}
tr { padding: 0; margin: 0; border: 0;
}
td { no-border-top: 1px solid white; padding: 5px 2px;
}
.image { width: 150px;
}
.image > img { width: 100%; background: white; border-radius: 2px; box-shadow: 0 2px 7px rgba(0,0,0,0.4); a-border: 1px solid black;
}
.amount { width: 50px;
}
.amount > input { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; color: white; font-size: 16px; background: transparent; border: none; width: 100%; text-align: center; outline: none;
}
.remove { width: 30px;
}
.remove > div { border-radius: 10px; width: 16px; height: 16px; line-height: 16px; padding: 2px; transition: background .3s, border .3s, transform .3s; cursor: pointer; text-align: center; margin: auto; border: 1px solid white;
}
.remove.hey > div { background: red; border-color: red; transform: scale(1.3);
}
.remove:hover > div { background: red; border-color: red;
}
.big { font-size: 2em; font-weight: bold;
}
#checkout { padding: 10px; font-size: 16px; color: white; display: inline-block; margin: 2px; border-radius: 3px; text-align: center; transition: background 0.2s; background: #0a8f6c; cursor: pointer;
}
#checkout > span { width: 0; display: inline-block; overflow: hidden; transition: width .3s; text-align: right;
}
#checkout:hover > span { width: 20px;
}
#footer { opacity: 0.6; border-top: 1px solid white; padding-top: 10px; text-align: center; margin-top: 15px;
}
#footer a { color: white;
}

Shopping cart - Script Codes JS Codes

// Really messy...
var el;
$("tr").each(function() { var subtotal = parseFloat($(this).children(".price").text().replace("$","")); var amount = parseFloat($(this).children(".amount").children("input").val()); $(this).children(".pricesubtotal").text("$"+ (Math.round( subtotal*amount*100 )/100).toFixed(2));
});
$(".amount > input").bind("change keyup", function() { if (parseFloat($(this).val())<1) { $(this).val(1); el = $(this).parents("td").parents("tr").children(".remove"); el.addClass("hey"); setTimeout(function() { el.removeClass("hey"); }, 200); } var subtotal = parseFloat($(this).parents("td").parents("tr").children(".price").text().replace("$","")); var amount = parseFloat($(this).parents("td").parents("tr").children(".amount").children("input").val()); $(this).parents("td").parents("tr").children(".pricesubtotal").text("$"+ (Math.round( subtotal*amount*100 )/100).toFixed(2)); changed();
});
$(".remove > div").click(function() { $(this).parents("td").parents("tr").remove(); changed();
});
function changed() { var subtotal = 0; $(".p").each(function() { subtotal = subtotal + parseFloat($(this).children(".pricesubtotal").text().replace("$","")); }); $(".totalpricesubtotal").text("$"+(Math.round(subtotal*100)/100).toFixed(2)); var a = (subtotal/100*105)+parseFloat($(".shipping").text()) var total = (Math.round(a*100)/100).toFixed(2); $(".realtotal").text(total); $(".taxval").text("($"+(Math.round(subtotal*5)/100).toFixed(2)+") ");
}
$("#checkout").click(function() { alert("And that's $"+$(".realtotal").text()+", please.");
});
changed();
$("#expand").click(function() { $("#coolstuff").toggle();
});
Shopping cart - Script Codes
Shopping cart - Script Codes
Home Page Home
Developer Jaflo
Username jaflo
Uploaded September 12, 2022
Rating 3.5
Size 4,412 Kb
Views 20,240
Do you need developer help for Shopping cart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jaflo (jaflo) Script Codes
Name
Menu toggle button
Icon wiggle animation
Nice flat icon
Styled calendar
Dialogue boxes
Scroll bar manipulation
Moving picture header
Cloud upload
D3 animation
File save gif in CSS
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!