"shop card"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/_Billy_Brown/pen/tvGof?limit=all&page=36&q=markup" /> <style class="cp-pen-styles">*, button, input, select { box-sizing: inherit; } html { background: #e5eaee; box-sizing: border-box; font-family: sans-serif; } body { margin: 0; } .shop { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: distribute; justify-content: space-around; } .item { background: white; box-shadow: 0 2px 5px #c5cacc; -webkit-box-flex: 0; -ms-flex: 0 auto; flex: 0 auto; margin: 1em; text-align: center; width: 15em; } .item__name { text-transform: capitalize; } .item__money-container, .item__count-container { display: -webkit-box; display: -ms-flexbox; display: flex; } .item__price, .item__cost, .item__remove, .item__count, .item__add { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 2.5rem; line-height: 1rem; padding: 0.75rem; } .item__price, .item__cost { position: relative; } /* add a name just above the field */ .item__price::before, .item__cost::before { display: block; font-size: 0.8em; position: absolute; text-align: center; top: -6px; right: 0; left: 0; } .item__price::before { content: "price"; } .item__cost { color: #59b; } .item__cost::before { content: "cost"; } .item__remove, .item__add { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; color: white; cursor: pointer; font-size: 1.25em; margin: 0; outline: none; } .item__remove { background: #f77; } .item__count { background: #ed6; } .item__add { background: #6d6; }</style></head><body> <section class="shop js-shop"> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/* * Make sure to read this from the bottom up to see what's going on. */ function Item(name, description, price, photo) { // Make sure that the object is accessible from at any scope inside it var _this = this; (function init() { // Initialise Item object, probably from JSON file _this.name = name; _this.description = description; _this.price = price; _this.photo = photo; // Count and cost start off at 0 _this.count = 0; _this.cost = 0; // Have the wrapper, which is the node for this item _this.wrapper = null; // Their values will need to change, so keep track of them here _this.countView = null; _this.costView = null; _this.countHidden = null; _this.costHidden = null; })(); } // Update the visible and hidden fields for count and cost Item.prototype.update = function() { var _this = this; _this.costView.textContent = poundify(_this.cost); _this.countView.textContent = _this.count; _this.costHidden.value = _this.cost; _this.countHidden.value = _this.count; }; Item.prototype.addItem = function(e) { var _this = this; // Prevent button from submitting the form e.preventDefault(); // Add to the count and price _this.count++; _this.cost += _this.price; // Update the item's markup _this.update(); }; Item.prototype.removeItem = function(e) { var _this = this; // Prevent button from submitting the form e.preventDefault(); // Do not allow count/cost to go negative if (_this.count > 0) { // Subtract from the count and price _this.count--; _this.cost -= _this.price; // Update the item's markup _this.update(); } }; // Prints the item to a container // It's a big function with lots of similar code, but no logic. // Counter is used for creating PHP POST variable Item.prototype.print = function(container, counter) { var _this = this; // Create all elements that will make up the HTML element _this.wrapper = document.createElement("article"); var header = document.createElement("header"); var name = document.createElement("h2"); var nameHidden = document.createElement("input"); var img = document.createElement("img"); var desc = document.createElement("p"); var moneyContainer = document.createElement("div"); var price = document.createElement("span"); _this.costView = document.createElement("span"); var countContainer = document.createElement("div"); var remove = document.createElement("button"); _this.countView = document.createElement("span"); var add = document.createElement("button"); // Add hidden inputs that will post their data with the form _this.countHidden = document.createElement("input"); _this.costHidden = document.createElement("input"); // Using BEM for Object Oriented styling/markup _this.wrapper.classList.add("item"); // Give the item a name and append the name and header to the wrapper name.appendChild(document.createTextNode(_this.name)); name.classList.add("item__name"); nameHidden.setAttribute("type", "hidden"); nameHidden.setAttribute("name", "item["+counter+"][name]"); nameHidden.setAttribute("value", _this.name); header.appendChild(name); header.appendChild(nameHidden); header.classList.add("item__header"); _this.wrapper.appendChild(header); // Give the image a source, alt and title, then append to wrapper img.setAttribute("src", _this.photo); img.setAttribute("alt", _this.name); img.setAttribute("title", _this.name); img.classList.add("item__img"); _this.wrapper.appendChild(img); // Now add the description desc.appendChild(document.createTextNode(_this.description)); desc.classList.add("item__description"); _this.wrapper.appendChild(desc); // Price and cost are displayed together in boxes // Use poundify function to make them into prices price.appendChild(document.createTextNode(poundify(_this.price))); _this.costView.appendChild(document.createTextNode(poundify(_this.cost))); price.classList.add("item__price"); _this.costView.classList.add("item__cost"); moneyContainer.classList.add("item__money-container"); moneyContainer.appendChild(price); moneyContainer.appendChild(_this.costView); _this.wrapper.appendChild(moneyContainer); // These inputs will hold the information to be posted to the php file _this.countHidden.setAttribute("type", "hidden"); _this.costHidden.setAttribute("type", "hidden"); _this.countHidden.setAttribute("name", "item["+counter+"][count]"); _this.costHidden.setAttribute("name", "item["+counter+"][cost]"); _this.countHidden.setAttribute("value", _this.count); _this.costHidden.setAttribute("value", _this.cost); _this.wrapper.appendChild(_this.countHidden); _this.wrapper.appendChild(_this.costHidden); // Now add + and - buttons, and count display remove.appendChild(document.createTextNode("-")); _this.countView.appendChild(document.createTextNode(_this.count)); add.appendChild(document.createTextNode("+")); remove.classList.add("item__remove"); remove.classList.add("js-remove"); _this.countView.classList.add("item__count"); add.classList.add("item__add"); add.classList.add("js-add"); // Add click event listeners remove.addEventListener("click", _this.removeItem.bind(_this), false); add.addEventListener("click", _this.addItem.bind(_this), false); countContainer.classList.add("item__count-container"); countContainer.appendChild(remove); countContainer.appendChild(_this.countView); countContainer.appendChild(add); _this.wrapper.appendChild(countContainer); // Finally, add the wrapper to its container container.appendChild(_this.wrapper); }; // Create an item object and add it to the shop Shop.prototype.addItem = function(element) { this.items.push(new Item( element.name, element.description, element.price, element.photo)); }; function Shop(filename) { // Allows this keyword to be used in all contexts var _this = this; (function init() { // Get the array of items in the JSON file var items = makeXHR(filename, function(s) { return JSON.parse(s); }).items; // Initialise the list of items as an empty array _this.items = []; // Add each element to the shop items.forEach(function (element, index, array) { _this.addItem(element); }); // HTML elements for the shop _this.vatView = document.querySelector("input[name=vat]"); _this.subtotalView = document.querySelector("input[name=subtotal]"); _this.deliveryView = document.querySelector("input[name=delivery]"); _this.totalCostView = document.querySelector("input[name=total_cost]"); })(); } // Print each item in the shop Shop.prototype.print = function(container) { var _this = this; _this.items.forEach(function (element, index, array) { element.print(container, index); }); }; // Although inconsequential, it keeps the code grouped together and scoped (function() { // Get the shop element in the document var shopContainer = document.querySelector(".js-shop"); // Initiate the shop object var shop = new Shop("https://codepen.io/_Billy_Brown/pen/FAucG.js"); shop.print(shopContainer); setCardTypeListener(); addChecks(); highlightRequired(); })(); // Convert amount into pounds function poundify(amount) { return "£" + amount.toFixed(2); } // Make HTTP request to a location and run the callback on its response function makeXHR(loc, callback) { var req = new XMLHttpRequest(); req.open("get", loc, false); req.send(); // Return the result of the callback return callback(req.responseText); } //# sourceURL=pen.js </script> </body></html>

Related: See More

Questions / Comments: