From 708353b7f84940c8e4750b73b1f86180e78ce334 Mon Sep 17 00:00:00 2001 From: Jason Zhu Date: Thu, 21 Apr 2022 00:34:04 +1000 Subject: [PATCH] Prettified all html and js --- ko-cart/index.html | 64 +++++---- ko-cart/js/viewmodel.js | 285 ++++++++++++++++++++-------------------- 2 files changed, 180 insertions(+), 169 deletions(-) diff --git a/ko-cart/index.html b/ko-cart/index.html index b6f8e2c..7dffddd 100644 --- a/ko-cart/index.html +++ b/ko-cart/index.html @@ -1,33 +1,39 @@ - - KO Shopping Cart - - - - -
-
-
-
- -
-
-
-
-
-
-
+ + KO Shopping Cart + + + + +
+
+
+
+ +
+
+
+
+
+
+
- - - - - - - - - + + + + + + + + + diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js index e0d128c..fd461fb 100644 --- a/ko-cart/js/viewmodel.js +++ b/ko-cart/js/viewmodel.js @@ -1,160 +1,165 @@ "use strict"; var vm = (function () { - var catalog = ko.observableArray([ - Product(1, "T-Shirt", 10.0, 20), - Product(2, "Trousers", 20.0, 10), - Product(3, "Shirt", 15.0, 20), - Product(4, "Shorts", 5.0, 10), - ]); + var catalog = ko.observableArray([ + Product(1, "T-Shirt", 10.0, 20), + Product(2, "Trousers", 20.0, 10), + Product(3, "Shirt", 15.0, 20), + Product(4, "Shorts", 5.0, 10), + ]); - var newProduct = Product("", "", "", ""); - var clearNewProduct = function () { - newProduct.name(""); - newProduct.price(""); - newProduct.stock(""); - }; + var newProduct = Product("", "", "", ""); + var clearNewProduct = function () { + newProduct.name(""); + newProduct.price(""); + newProduct.stock(""); + }; - var addProduct = function (context) { - var id = new Date().valueOf(); // random id from time + var addProduct = function (context) { + var id = new Date().valueOf(); // random id from time - var product = Product(id, context.name(), context.price(), context.stock()); - catalog.push(product); - clearNewProduct(); - }; + var product = Product( + id, + context.name(), + context.price(), + context.stock() + ); + catalog.push(product); + clearNewProduct(); + }; - var searchTerm = ko.observable(""); - var filteredCatalog = ko.computed(function () { - // if catalog is empty return empty array - if (!catalog()) { - return []; - } - var filter = searchTerm().toLowerCase(); - // if filter is empty return all the catalog - if (!filter) { - return catalog(); - } - //filter data - var filtered = ko.utils.arrayFilter(catalog(), function (item) { - var strProp = ko.unwrap(item["name"]).toLocaleLowerCase(); - return (strProp.indexOf(filter) > -1); + var searchTerm = ko.observable(""); + var filteredCatalog = ko.computed(function () { + // if catalog is empty return empty array + if (!catalog()) { + return []; + } + var filter = searchTerm().toLowerCase(); + // if filter is empty return all the catalog + if (!filter) { + return catalog(); + } + //filter data + var filtered = ko.utils.arrayFilter(catalog(), function (item) { + var strProp = ko.unwrap(item["name"]).toLocaleLowerCase(); + return strProp.indexOf(filter) > -1; + }); + return filtered; }); - return filtered; - }); - - var cart = ko.observableArray([]); - var showCartDetails = function () { - if (cart().length > 0) { - visibleCart(true); - } - }; - var addToCart = function(data) { - var item = null; - var tmpCart = cart(); - var n = tmpCart.length; - while(n--) { - if (tmpCart[n].product.id() === data.id()) { - item = tmpCart[n]; - } - } - if (item) { - item.addUnit(); - } else { - item = new CartProduct(data, 0); - item.addUnit(); - tmpCart.push(item); - } - cart(tmpCart); - }; - - // The cart-widget template - var totalItems = ko.computed(function() { - var tmpCart = cart(); - var total = 0; - tmpCart.forEach(function(item) { - total += parseInt(item.units(), 10); + + var cart = ko.observableArray([]); + var showCartDetails = function () { + if (cart().length > 0) { + visibleCart(true); + } + }; + var addToCart = function (data) { + var item = null; + var tmpCart = cart(); + var n = tmpCart.length; + while (n--) { + if (tmpCart[n].product.id() === data.id()) { + item = tmpCart[n]; + } + } + if (item) { + item.addUnit(); + } else { + item = new CartProduct(data, 0); + item.addUnit(); + tmpCart.push(item); + } + cart(tmpCart); + }; + + // The cart-widget template + var totalItems = ko.computed(function () { + var tmpCart = cart(); + var total = 0; + tmpCart.forEach(function (item) { + total += parseInt(item.units(), 10); + }); + return total; }); - return total; - }) - var grandTotal = ko.computed(function() { - var tmpCart = cart(); - var total = 0; - tmpCart.forEach(function(item) { - total += (item.units() * item.product.price()); + var grandTotal = ko.computed(function () { + var tmpCart = cart(); + var total = 0; + tmpCart.forEach(function (item) { + total += item.units() * item.product.price(); + }); + return total; }); - return total; - }) - // The cart-item template - var removeFromCart = function (data) { - var units = data.units(); - var stock = data.product.stock(); - data.product.stock(units + stock); - cart.remove(data); - } + // The cart-item template + var removeFromCart = function (data) { + var units = data.units(); + var stock = data.product.stock(); + data.product.stock(units + stock); + cart.remove(data); + }; - // The cart template - var hideCartDetails = function() { - visibleCart(false); - }; - var showOrder = function () { - visibleCatalog(false); - } + // The cart template + var hideCartDetails = function () { + visibleCart(false); + }; + var showOrder = function () { + visibleCatalog(false); + }; - // The order template - var showCatalog = function () { - visibleCatalog(true); - }; - var finishOrder = function() { - cart([]); - hideCartDetails(); - showCatalog(); - $("#finishOrderModal").modal('show'); - } + // The order template + var showCatalog = function () { + visibleCatalog(true); + }; + var finishOrder = function () { + cart([]); + hideCartDetails(); + showCatalog(); + $("#finishOrderModal").modal("show"); + }; - var visibleCatalog = ko.observable(true); - var visibleCart = ko.observable(false); + var visibleCatalog = ko.observable(true); + var visibleCart = ko.observable(false); - return { - // first chapter - searchTerm: searchTerm, - catalog: filteredCatalog, - newProduct: newProduct, - addProduct: addProduct, - // second chapter - cart: cart, - showCartDetails: showCartDetails, - addToCart: addToCart, - totalItems: totalItems, - grandTotal: grandTotal, - removeFromCart: removeFromCart, - hideCartDetails: hideCartDetails, - showOrder: showOrder, - showCatalog: showCatalog, - finishOrder: finishOrder, - visibleCatalog: visibleCatalog, - visibleCart: visibleCart - }; + return { + // first chapter + searchTerm: searchTerm, + catalog: filteredCatalog, + newProduct: newProduct, + addProduct: addProduct, + // second chapter + cart: cart, + showCartDetails: showCartDetails, + addToCart: addToCart, + totalItems: totalItems, + grandTotal: grandTotal, + removeFromCart: removeFromCart, + hideCartDetails: hideCartDetails, + showOrder: showOrder, + showCatalog: showCatalog, + finishOrder: finishOrder, + visibleCatalog: visibleCatalog, + visibleCart: visibleCart, + }; })(); var templates = [ - 'header', - 'catalog', - 'cart', - 'cart-item', - 'cart-widget', - 'order', - 'add-to-catalog-modal', - 'finish-order-modal' + "header", + "catalog", + "cart", + "cart-item", + "cart-widget", + "order", + "add-to-catalog-modal", + "finish-order-modal", ]; var busy = templates.length; -templates.forEach(function(tpl){ - "use strict"; - $.get('views/' + tpl + '.html').then(function(data) { - $('body').append(data); - busy--; - if (!busy) { - ko.applyBindings(vm); - } - }) -}) \ No newline at end of file +templates.forEach(function (tpl) { + "use strict"; + $.get("views/" + tpl + ".html").then(function (data) { + $("body").append(data); + busy--; + if (!busy) { + ko.applyBindings(vm); + } + }); +});