From 8fde053afb1536dc93273294ae0e3b9268cfa88c Mon Sep 17 00:00:00 2001 From: Josue Benjamin Date: Wed, 4 Jan 2023 17:20:45 -0300 Subject: [PATCH 001/274] SleepOutside first commit --- package-lock.json | 4 +-- package.json | 1 - src/cart/index.html | 26 +--------------- src/checkout/index.html | 23 +------------- src/json/sleeping-bags.json | 60 ++++++++++--------------------------- src/json/tents.json | 2 +- 6 files changed, 20 insertions(+), 96 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ff6702c..fc11712d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "outside", - "version": "1.1.0", + "version": "2.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "outside", - "version": "1.1.0", + "version": "2.0.0", "license": "ISC", "devDependencies": { "eslint": "^8.26.0", diff --git a/package.json b/package.json index 829e444f..1e71840a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "lint": "eslint *.js src/**/*.js", "format": "prettier --ignore-path ./.gitignore --write \"./**/*.{html,json,js,ts,css}\"", "test": "jest" - }, "author": "Shane Thompson", "license": "ISC", diff --git a/src/cart/index.html b/src/cart/index.html index 659c2bb4..7f01e305 100644 --- a/src/cart/index.html +++ b/src/cart/index.html @@ -1,9 +1,7 @@ - - @@ -13,31 +11,22 @@ - -
-
- - - @@ -64,23 +53,16 @@ - - -
-
-
-

My Cart

    - -
-
-
- - - diff --git a/src/checkout/index.html b/src/checkout/index.html index 87645865..60615e73 100644 --- a/src/checkout/index.html +++ b/src/checkout/index.html @@ -1,9 +1,7 @@ - - @@ -11,30 +9,22 @@ Sleep Outside | Checkout - -
-
- - - @@ -61,28 +51,17 @@ - - -
-
-
-

Review & Place your Order

-
-
- - - diff --git a/src/json/sleeping-bags.json b/src/json/sleeping-bags.json index 6bf7a124..5d015123 100644 --- a/src/json/sleeping-bags.json +++ b/src/json/sleeping-bags.json @@ -35,9 +35,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -93,9 +91,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "LH" - ] + "ZIPPER": ["LH"] }, "Colors": [ { @@ -196,12 +192,8 @@ ] }, "SizesAvailable": { - "LENGTH": [ - "REG" - ], - "ZIPPER": [ - "R" - ] + "LENGTH": ["REG"], + "ZIPPER": ["R"] }, "Colors": [ { @@ -323,9 +315,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -370,9 +360,7 @@ "ExtraImages": null }, "SizesAvailable": { - "HAND": [ - "LH" - ] + "HAND": ["LH"] }, "Colors": [ { @@ -422,9 +410,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -474,9 +460,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -526,9 +510,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -578,9 +560,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -630,9 +610,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -730,9 +708,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -1018,9 +994,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "L" - ] + "ZIPPER": ["L"] }, "Colors": [ { @@ -1070,9 +1044,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "R" - ] + "ZIPPER": ["R"] }, "Colors": [ { @@ -1122,9 +1094,7 @@ ] }, "SizesAvailable": { - "ZIPPER": [ - "RH" - ] + "ZIPPER": ["RH"] }, "Colors": [ { diff --git a/src/json/tents.json b/src/json/tents.json index 98029223..d24bd8bc 100644 --- a/src/json/tents.json +++ b/src/json/tents.json @@ -99,7 +99,7 @@ { "ColorCode": "01", "ColorName": "Pale Pumpkin/Terracotta" - } + } ], "DescriptionHtmlSimple": "Excess. Get out and enjoy nature with Marmot's Ajax tent, featuring a smart design with durable, waterproof construction and two doors for easy access.", "SuggestedRetailPrice": 275.0, From d6665fd777be01414a375e4f811c8b40ab489000 Mon Sep 17 00:00:00 2001 From: Josue Benjamin Date: Wed, 4 Jan 2023 17:32:52 -0300 Subject: [PATCH 002/274] fixing semicolons for single colons --- src/index.html | 96 ++++++++++++++++++++++++++--------------------- src/js/cart.js | 24 ++++++------ src/js/product.js | 12 +++--- vite.config.js | 22 +++++------ 4 files changed, 82 insertions(+), 72 deletions(-) diff --git a/src/index.html b/src/index.html index 35ac63ce..1b84b061 100644 --- a/src/index.html +++ b/src/index.html @@ -9,20 +9,31 @@
- - - - - - - - + + + + + + + @@ -37,7 +48,7 @@ alt="image of a high mountain lake" />
@@ -55,48 +66,47 @@

Top Products

 diff --git a/src/js/cart.js b/src/js/cart.js index a2fb3d8e..ea1a081c 100644 --- a/src/js/cart.js +++ b/src/js/cart.js @@ -1,25 +1,25 @@ -import { getLocalStorage } from "./utils.mjs"; +import { getLocalStorage } from './utils.mjs'; function renderCartContents() { - const cartItems = getLocalStorage("so-cart"); + const cartItems = getLocalStorage('so-cart'); const htmlItems = cartItems.map((item) => cartItemTemplate(item)); - document.querySelector(".product-list").innerHTML = htmlItems.join(""); + document.querySelector('.product-list').innerHTML = htmlItems.join(''); } function cartItemTemplate(item) { - const newItem = `
  • - + const newItem = `
  • + ${item.Name} - -

    ${item.Name}

    +     +

    ${item.Name}

     -

    ${item.Colors[0].ColorName}

    -

    qty: 1

    -

    $${item.FinalPrice}

    +

    ${item.Colors[0].ColorName}

    +

    qty: 1

    +

    $${item.FinalPrice}

    • `; return newItem; diff --git a/src/js/product.js b/src/js/product.js index 0b8d0aa6..85042984 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,10 +1,10 @@ -import { setLocalStorage } from "./utils.mjs"; -import ProductData from "./ProductData.mjs"; +import { setLocalStorage } from './utils.mjs'; +import ProductData from './ProductData.mjs'; -const dataSource = new ProductData("tents"); +const dataSource = new ProductData('tents'); function addProductToCart(product) { - setLocalStorage("so-cart", product); + setLocalStorage('so-cart', product); } // add to cart button event handler async function addToCartHandler(e) { @@ -14,5 +14,5 @@ async function addToCartHandler(e) { // add listener to Add to Cart button document - .getElementById("addToCart") - .addEventListener("click", addToCartHandler); + .getElementById('addToCart') + .addEventListener('click', addToCartHandler); diff --git a/vite.config.js b/vite.config.js index 4a5eef38..e10d027a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,28 +1,28 @@ -import { resolve } from "path"; -import { defineConfig } from "vite"; +import { resolve } from 'path'; +import { defineConfig } from 'vite'; export default defineConfig({ - root: "src/", + root: 'src/', build: { - outDir: "../dist", + outDir: '../dist', rollupOptions: { input: { - main: resolve(__dirname, "src/index.html"), - cart: resolve(__dirname, "src/cart/index.html"), - checkout: resolve(__dirname, "src/checkout/index.html"), + main: resolve(__dirname, 'src/index.html'), + cart: resolve(__dirname, 'src/cart/index.html'), + checkout: resolve(__dirname, 'src/checkout/index.html'), product1: resolve( __dirname, - "src/product_pages/cedar-ridge-rimrock-2.html" + 'src/product_pages/cedar-ridge-rimrock-2.html' ), - product2: resolve(__dirname, "src/product_pages/marmot-ajax-3.html"), + product2: resolve(__dirname, 'src/product_pages/marmot-ajax-3.html'), product3: resolve( __dirname, - "src/product_pages/northface-alpine-3.html" + 'src/product_pages/northface-alpine-3.html' ), product4: resolve( __dirname, - "src/product_pages/northface-talus-4.html" + 'src/product_pages/northface-talus-4.html' ), }, }, From 21f8adf5342eb4d714c9871d9c4363ce087d73ed Mon Sep 17 00:00:00 2001 From: IMUST1995 Date: Wed, 4 Jan 2023 13:50:44 -0700 Subject: [PATCH 003/274] first commit Zeir --- src/js/cart.js | 6 +++--- src/js/product.js | 12 ++++++------ vite.config.js | 22 +++++++++++----------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/js/cart.js b/src/js/cart.js index ea1a081c..09eb7f8a 100644 --- a/src/js/cart.js +++ b/src/js/cart.js @@ -1,9 +1,9 @@ -import { getLocalStorage } from './utils.mjs'; +import { getLocalStorage } from "./utils.mjs"; function renderCartContents() { - const cartItems = getLocalStorage('so-cart'); + const cartItems = getLocalStorage("so-cart"); const htmlItems = cartItems.map((item) => cartItemTemplate(item)); - document.querySelector('.product-list').innerHTML = htmlItems.join(''); + document.querySelector(".product-list").innerHTML = htmlItems.join(""); } function cartItemTemplate(item) { diff --git a/src/js/product.js b/src/js/product.js index 85042984..0b8d0aa6 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,10 +1,10 @@ -import { setLocalStorage } from './utils.mjs'; -import ProductData from './ProductData.mjs'; +import { setLocalStorage } from "./utils.mjs"; +import ProductData from "./ProductData.mjs"; -const dataSource = new ProductData('tents'); +const dataSource = new ProductData("tents"); function addProductToCart(product) { - setLocalStorage('so-cart', product); + setLocalStorage("so-cart", product); } // add to cart button event handler async function addToCartHandler(e) { @@ -14,5 +14,5 @@ async function addToCartHandler(e) { // add listener to Add to Cart button document - .getElementById('addToCart') - .addEventListener('click', addToCartHandler); + .getElementById("addToCart") + .addEventListener("click", addToCartHandler); diff --git a/vite.config.js b/vite.config.js index e10d027a..4a5eef38 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,28 +1,28 @@ -import { resolve } from 'path'; -import { defineConfig } from 'vite'; +import { resolve } from "path"; +import { defineConfig } from "vite"; export default defineConfig({ - root: 'src/', + root: "src/", build: { - outDir: '../dist', + outDir: "../dist", rollupOptions: { input: { - main: resolve(__dirname, 'src/index.html'), - cart: resolve(__dirname, 'src/cart/index.html'), - checkout: resolve(__dirname, 'src/checkout/index.html'), + main: resolve(__dirname, "src/index.html"), + cart: resolve(__dirname, "src/cart/index.html"), + checkout: resolve(__dirname, "src/checkout/index.html"), product1: resolve( __dirname, - 'src/product_pages/cedar-ridge-rimrock-2.html' + "src/product_pages/cedar-ridge-rimrock-2.html" ), - product2: resolve(__dirname, 'src/product_pages/marmot-ajax-3.html'), + product2: resolve(__dirname, "src/product_pages/marmot-ajax-3.html"), product3: resolve( __dirname, - 'src/product_pages/northface-alpine-3.html' + "src/product_pages/northface-alpine-3.html" ), product4: resolve( __dirname, - 'src/product_pages/northface-talus-4.html' + "src/product_pages/northface-talus-4.html" ), }, }, From 7ec1b51e061f034918ba679bb738591b02d44e9c Mon Sep 17 00:00:00 2001 From: Josue Benjamin Date: Wed, 4 Jan 2023 18:02:20 -0300 Subject: [PATCH 004/274] josue's name --- team.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 team.txt diff --git a/team.txt b/team.txt new file mode 100644 index 00000000..87be67b6 --- /dev/null +++ b/team.txt @@ -0,0 +1,3 @@ +Trello link: https://trello.com/b/KflaqxFD/wdd-330 + +Josue Centurion \ No newline at end of file From 4a0573f6920adbaaefd0ab4a63e8a7e835006f03 Mon Sep 17 00:00:00 2001 From: diannaqui Date: Wed, 4 Jan 2023 14:03:14 -0700 Subject: [PATCH 005/274] DQ --- team.txt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/team.txt b/team.txt index 87be67b6..1ec39183 100644 --- a/team.txt +++ b/team.txt @@ -1,3 +1,4 @@ Trello link: https://trello.com/b/KflaqxFD/wdd-330 -Josue Centurion \ No newline at end of file +Josue Centurion +Diana Quispe \ No newline at end of file From 8ee888873c882ab7a2307f7654c672cbb00e0069 Mon Sep 17 00:00:00 2001 From: IMUST1995 Date: Wed, 4 Jan 2023 14:04:31 -0700 Subject: [PATCH 006/274] adding my name zeir --- team.txt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/team.txt b/team.txt index 1ec39183..c974df46 100644 --- a/team.txt +++ b/team.txt @@ -1,4 +1,5 @@ Trello link: https://trello.com/b/KflaqxFD/wdd-330 Josue Centurion -Diana Quispe \ No newline at end of file +Diana Quispe +Zeir Braidi \ No newline at end of file From d0a8e7415c9ecb51dd78d5dd3f85ef07f93ba368 Mon Sep 17 00:00:00 2001 From: Josue Benjamin Date: Wed, 4 Jan 2023 18:29:08 -0300 Subject: [PATCH 007/274] adding branch josue --- team.txt | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/team.txt b/team.txt index c974df46..fcaa0234 100644 --- a/team.txt +++ b/team.txt @@ -2,4 +2,8 @@ Trello link: https://trello.com/b/KflaqxFD/wdd-330 Josue Centurion Diana Quispe -Zeir Braidi \ No newline at end of file +Zeir Braidi + branch josue + main file -- --- ---- + branch Diana + git checkout -b branch-Zair git checkout origin/master From 2fc7cee912297ff1ba08a02d3df7c27d75c02953 Mon Sep 17 00:00:00 2001 From: Josue Benjamin Date: Wed, 4 Jan 2023 18:30:58 -0300 Subject: [PATCH 008/274] yourname file --- yourname.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 yourname.txt diff --git a/yourname.txt b/yourname.txt new file mode 100644 index 00000000..e69de29b From c56762e7107bb6f44019536b53f61afd2eeffab8 Mon Sep 17 00:00:00 2001 From: Josue Benjamin Date: Wed, 4 Jan 2023 18:43:40 -0300 Subject: [PATCH 009/274] dsada --- yourname.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/yourname.txt b/yourname.txt index e69de29b..b9282c7c 100644 --- a/yourname.txt +++ b/yourname.txt @@ -0,0 +1 @@ +sdadasdsa \ No newline at end of file From 5796631be4f427134b66cd2f37f896b69e4db47a Mon Sep 17 00:00:00 2001 From: FelixS2000 <113263790+FelixS2000@users.noreply.github.com> Date: Wed, 4 Jan 2023 19:12:39 -0400 Subject: [PATCH 010/274] felix's name --- team.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/team.txt b/team.txt index fcaa0234..abc36969 100644 --- a/team.txt +++ b/team.txt @@ -3,6 +3,7 @@ Trello link: https://trello.com/b/KflaqxFD/wdd-330 Josue Centurion Diana Quispe Zeir Braidi +Felix Guzman branch josue main file -- --- ---- branch Diana From 8da96106daa72cbc8ddc3ee7e793efd7ffea0557 Mon Sep 17 00:00:00 2001 From: IMUST1995 Date: Thu, 5 Jan 2023 07:25:26 -0700 Subject: [PATCH 011/274] team.txt update --- team.txt | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/team.txt b/team.txt index abc36969..4c0c44ec 100644 --- a/team.txt +++ b/team.txt @@ -3,8 +3,4 @@ Trello link: https://trello.com/b/KflaqxFD/wdd-330 Josue Centurion Diana Quispe Zeir Braidi -Felix Guzman - branch josue - main file -- --- ---- - branch Diana - git checkout -b branch-Zair git checkout origin/master +Felix Guzman \ No newline at end of file From aa17bf5198209b234600668df21363dac5dfb55a Mon Sep 17 00:00:00 2001 From: FelixS2000 <113263790+FelixS2000@users.noreply.github.com> Date: Thu, 5 Jan 2023 11:42:25 -0400 Subject: [PATCH 012/274] felix's name --- felix_name.txt | 1 + yourname.txt | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 felix_name.txt delete mode 100644 yourname.txt diff --git a/felix_name.txt b/felix_name.txt new file mode 100644 index 00000000..f3ac7311 --- /dev/null +++ b/felix_name.txt @@ -0,0 +1 @@ +Felix Guzman \ No newline at end of file diff --git a/yourname.txt b/yourname.txt deleted file mode 100644 index b9282c7c..00000000 --- a/yourname.txt +++ /dev/null @@ -1 +0,0 @@ -sdadasdsa \ No newline at end of file From d5decb8bdb5aa2258005adfdbcc169cd921471c1 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Tue, 10 Jan 2023 17:11:02 -0400 Subject: [PATCH 013/274] Felix's name --- felix_name.txt => FelixGuzman.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename felix_name.txt => FelixGuzman.txt (100%) diff --git a/felix_name.txt b/FelixGuzman.txt similarity index 100% rename from felix_name.txt rename to FelixGuzman.txt From 17fdfdec640653a00d0b8c456dd47b064ed719f7 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Tue, 10 Jan 2023 17:13:05 -0400 Subject: [PATCH 014/274] update eslinc --- .eslintrc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index dd5dbdc7..17f92484 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -25,7 +25,7 @@ } ], "no-console": 1, - "quotes": ["error", "single", { "allowTemplateLiterals": true }], + "quotes": ["error", "double", { "allowTemplateLiterals": true }], "func-names": 0, "space-unary-ops": 2, "space-in-parens": "error", From 966903517257e75340e29be7e00e94adc878ccef Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Wed, 11 Jan 2023 14:03:35 -0400 Subject: [PATCH 015/274] product to cart --- src/js/product.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/js/product.js b/src/js/product.js index 0b8d0aa6..0bb550ac 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -10,6 +10,15 @@ function addProductToCart(product) { async function addToCartHandler(e) { const product = await dataSource.findProductById(e.target.dataset.id); addProductToCart(product); + // Get the button element by its ID + var button = document.getElementById("addToCart"); + + // Add an event listener to the button + button.addEventListener("click", function() { + // This function will be called when the button is clicked + console.log(product["Name"]); + }); + } // add listener to Add to Cart button From 48eaca7a50ad0da329a63dec058aa210d4a1c74f Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Fri, 13 Jan 2023 17:48:24 -0400 Subject: [PATCH 016/274] samuel's change --- src/product_pages/index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/product_pages/index.html diff --git a/src/product_pages/index.html b/src/product_pages/index.html new file mode 100644 index 00000000..a9c61bca --- /dev/null +++ b/src/product_pages/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + From 43aef9758e8b0712f68405f1cb263ed59e4b3b40 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Fri, 13 Jan 2023 17:48:41 -0400 Subject: [PATCH 017/274] some changes --- src/js/ProductDetails.mjs | 0 src/js/product.js | 8 +++++--- 2 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 src/js/ProductDetails.mjs diff --git a/src/js/ProductDetails.mjs b/src/js/ProductDetails.mjs new file mode 100644 index 00000000..e69de29b diff --git a/src/js/product.js b/src/js/product.js index 0bb550ac..c1075151 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -16,12 +16,14 @@ async function addToCartHandler(e) { // Add an event listener to the button button.addEventListener("click", function() { // This function will be called when the button is clicked - console.log(product["Name"]); - }); - + alert("You purchase!") + console.log(product["Id"]) + }); + } // add listener to Add to Cart button document .getElementById("addToCart") .addEventListener("click", addToCartHandler); + From 393815f69e91d33e1c5d6459e33bd2576edbb113 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Fri, 13 Jan 2023 19:55:16 -0400 Subject: [PATCH 018/274] product's change --- src/js/ProductDetails.mjs | 48 ++++++++++++++++++++++++ src/js/product.js | 4 ++ src/product_pages/index.html | 72 ++++++++++++++++++++++++++++++------ 3 files changed, 113 insertions(+), 11 deletions(-) diff --git a/src/js/ProductDetails.mjs b/src/js/ProductDetails.mjs index e69de29b..ae771738 100644 --- a/src/js/ProductDetails.mjs +++ b/src/js/ProductDetails.mjs @@ -0,0 +1,48 @@ +import { setLocalStorage } from "./utils.mjs"; + +function productDetailsTemplate(product) { + return `

    ${product.Brand.Name}

    +

    ${product.NameWithoutBrand}

    + ${product.NameWithoutBrand} +

    $${product.FinalPrice}

    +

    ${product.Colors[0].ColorName}

    +

    + ${product.DescriptionHtmlSimple} +

    +
    + +
    `; +} + +export default class ProductDetails { + constructor(productId, dataSource) { + this.productId = productId; + this.product = {}; + this.dataSource = dataSource; + } + async init() { + // use our datasource to get the details for the current product. findProductById will return a promise! use await or .then() to process it + this.product = await this.dataSource.findProductById(this.productId); + // once we have the product details we can render out the HTML + this.renderProductDetails("main"); + // once the HTML is rendered we can add a listener to Add to Cart button + // Notice the .bind(this). Our callback will not work if we don't include that line. Review the readings from this week on 'this' to understand why. + document + .getElementById("addToCart") + .addEventListener("click", this.addToCart.bind(this)); + } + addToCart() { + setLocalStorage("so-cart", this.product); + } + renderProductDetails(selector) { + const element = document.querySelector(selector); + element.insertAdjacentHTML( + "afterBegin", + productDetailsTemplate(this.product) + ); + } +} diff --git a/src/js/product.js b/src/js/product.js index c1075151..19ea1af5 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,8 +1,12 @@ import { setLocalStorage } from "./utils.mjs"; import ProductData from "./ProductData.mjs"; +import ProductDetails from "./ProductDetails.mjs"; const dataSource = new ProductData("tents"); +const productId = setLocalStorage("product"); +const products = new ProductDetails(productId, dataSource); +products.init(); function addProductToCart(product) { setLocalStorage("so-cart", product); } diff --git a/src/product_pages/index.html b/src/product_pages/index.html index a9c61bca..1f95861a 100644 --- a/src/product_pages/index.html +++ b/src/product_pages/index.html @@ -1,14 +1,64 @@ + - - - - - Document - - - - - - + + + + + + SleepOutside | Cedar Ridge Rimrock 2-person tent + + + + + + + +
    + + +
    + + + + + + + + + + + + + + + + + +
    +
    + +
    + +
    ©NOT a real business
    + From efe50e5cdd9a9fc953e63f6bbdd676a4c26fb67a Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Sat, 14 Jan 2023 07:56:33 -0400 Subject: [PATCH 019/274] saveing --- src/js/product.js | 6 +++--- src/js/utils.mjs | 7 +++++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/js/product.js b/src/js/product.js index 19ea1af5..00c20eea 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,14 +1,14 @@ -import { setLocalStorage } from "./utils.mjs"; +import { getParam } from "./utils.mjs"; import ProductData from "./ProductData.mjs"; import ProductDetails from "./ProductDetails.mjs"; const dataSource = new ProductData("tents"); -const productId = setLocalStorage("product"); +const productId = getParam("product"); const products = new ProductDetails(productId, dataSource); products.init(); function addProductToCart(product) { - setLocalStorage("so-cart", product); + getParam("so-cart", product); } // add to cart button event handler async function addToCartHandler(e) { diff --git a/src/js/utils.mjs b/src/js/utils.mjs index 1a04d87f..7762fb43 100644 --- a/src/js/utils.mjs +++ b/src/js/utils.mjs @@ -21,3 +21,10 @@ export function setClick(selector, callback) { }); qs(selector).addEventListener("click", callback); } +// helper to get parameter strings +export function getParam(param) { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const product = urlParams.get(param); + return product; +} From 66d393a54701ffd8ecf9c136d2e5aabc6d58ed85 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Sat, 14 Jan 2023 08:08:14 -0400 Subject: [PATCH 020/274] save product --- src/js/product.js | 40 +++++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/js/product.js b/src/js/product.js index 00c20eea..a0d1087a 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,33 +1,39 @@ -import { getParam } from "./utils.mjs"; +import { getLocalStorage, setLocalStorage } from "./utils.mjs"; import ProductData from "./ProductData.mjs"; -import ProductDetails from "./ProductDetails.mjs"; const dataSource = new ProductData("tents"); -const productId = getParam("product"); -const products = new ProductDetails(productId, dataSource); -products.init(); function addProductToCart(product) { - getParam("so-cart", product); + let cart = getLocalStorage("soCart"); + if (cart) { + let tent = 1; + for (let i = 0; i < cart.length; i++) { + if (cart[i].Id == product.Id) { + product.quantity = cart[i].quantity++; + tent = 0; + } + } + + if (tent == 1) { + product.quantity = 1; + cart.push(product); + } + } else { + cart = []; + product.quantity = 1; + cart.push(product); + } + + setLocalStorage("soCart", cart); } + // add to cart button event handler async function addToCartHandler(e) { const product = await dataSource.findProductById(e.target.dataset.id); addProductToCart(product); - // Get the button element by its ID - var button = document.getElementById("addToCart"); - - // Add an event listener to the button - button.addEventListener("click", function() { - // This function will be called when the button is clicked - alert("You purchase!") - console.log(product["Id"]) - }); - } // add listener to Add to Cart button document .getElementById("addToCart") .addEventListener("click", addToCartHandler); - From 7de539d1c3e68ebf5fc8160173e3fa26355f2aa6 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Sat, 14 Jan 2023 19:52:39 -0400 Subject: [PATCH 021/274] prod 1 --- src/js/product.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/js/product.js b/src/js/product.js index a0d1087a..907d57e2 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -31,9 +31,26 @@ function addProductToCart(product) { async function addToCartHandler(e) { const product = await dataSource.findProductById(e.target.dataset.id); addProductToCart(product); + // Get the button element by its ID +var button = document.getElementById("addToCart"); + +// Add an event listener to the button +button.addEventListener("click", function() { + // This function will be called when the button is clicked + alert("You purchase!" + "" + product["Name"]) +}); + } // add listener to Add to Cart button document .getElementById("addToCart") .addEventListener("click", addToCartHandler); + // Get the button element by its ID + var addButton = document.getElementById("addToCart"); + + // Add an event listener to the button + addButton.addEventListener("click", function() { + // This function will be called when the addButton is clicked + alert("Add button was clicked!"); + }); From 1a1ab1f43b4ca037083769913e5c07c32c0dbc40 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Sat, 14 Jan 2023 20:17:33 -0400 Subject: [PATCH 022/274] product --- src/js/product.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/js/product.js b/src/js/product.js index 907d57e2..2d848ce5 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -46,11 +46,4 @@ button.addEventListener("click", function() { document .getElementById("addToCart") .addEventListener("click", addToCartHandler); - // Get the button element by its ID - var addButton = document.getElementById("addToCart"); - - // Add an event listener to the button - addButton.addEventListener("click", function() { - // This function will be called when the addButton is clicked - alert("Add button was clicked!"); - }); + From c0ceefb0291e9a229efab90a7ec7abef4118d773 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Sat, 14 Jan 2023 20:30:12 -0400 Subject: [PATCH 023/274] init commit --- src/js/cart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/cart.js b/src/js/cart.js index 09eb7f8a..7d2fd39b 100644 --- a/src/js/cart.js +++ b/src/js/cart.js @@ -1,7 +1,7 @@ import { getLocalStorage } from "./utils.mjs"; function renderCartContents() { - const cartItems = getLocalStorage("so-cart"); + const cartItems = getLocalStorage("soCart"); const htmlItems = cartItems.map((item) => cartItemTemplate(item)); document.querySelector(".product-list").innerHTML = htmlItems.join(""); } @@ -18,7 +18,7 @@ function cartItemTemplate(item) {

    ${item.Name}

    ${item.Colors[0].ColorName}

    -

    qty: 1

    +

    ${item.quantity}

    $${item.FinalPrice}

    `; From 036ff6bff171ad04e80f3870b811e73301481a22 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Wed, 18 Jan 2023 10:51:20 -0400 Subject: [PATCH 024/274] some changes --- src/cart/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cart/index.html b/src/cart/index.html index 7f01e305..5308a84f 100644 --- a/src/cart/index.html +++ b/src/cart/index.html @@ -25,6 +25,7 @@
    +
    Date: Wed, 18 Jan 2023 10:51:34 -0400 Subject: [PATCH 025/274] some changes --- src/css/style.css | 1 - src/js/cart.js | 1 + src/js/product.js | 11 +++++++---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index dee10f62..9cc8740c 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -201,7 +201,6 @@ button { grid-row: 2; grid-column: 3; } - @media screen and (min-width: 500px) { body { max-width: 1080px; diff --git a/src/js/cart.js b/src/js/cart.js index 7d2fd39b..70aa0b29 100644 --- a/src/js/cart.js +++ b/src/js/cart.js @@ -26,3 +26,4 @@ function cartItemTemplate(item) { } renderCartContents(); + diff --git a/src/js/product.js b/src/js/product.js index 2d848ce5..f798a090 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -1,8 +1,9 @@ -import { getLocalStorage, setLocalStorage } from "./utils.mjs"; +import { getLocalStorage, setLocalStorage, getParam } from "./utils.mjs"; import ProductData from "./ProductData.mjs"; const dataSource = new ProductData("tents"); - +const productId = new getParam("product"); +console.log(dataSource.findProductById(productId)); function addProductToCart(product) { let cart = getLocalStorage("soCart"); if (cart) { @@ -38,8 +39,9 @@ var button = document.getElementById("addToCart"); button.addEventListener("click", function() { // This function will be called when the button is clicked alert("You purchase!" + "" + product["Name"]) -}); - + + }); + } // add listener to Add to Cart button @@ -47,3 +49,4 @@ document .getElementById("addToCart") .addEventListener("click", addToCartHandler); + From e06fc4d85973ef4fdf52c65f147f10b51e0d5adf Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Wed, 18 Jan 2023 11:17:11 -0400 Subject: [PATCH 026/274] alert's change --- src/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.html b/src/index.html index 1b84b061..daedc36c 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@ tent image for logo SleepOutside
    +
    From d8f99201c8d68954a11f7f3b2a8361fa2cdf3513 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Wed, 18 Jan 2023 11:17:20 -0400 Subject: [PATCH 027/274] alerts --- src/js/Alert.js | 8 ++++++++ src/json/alerts.json | 7 +++++++ 2 files changed, 15 insertions(+) create mode 100644 src/js/Alert.js create mode 100644 src/json/alerts.json diff --git a/src/js/Alert.js b/src/js/Alert.js new file mode 100644 index 00000000..343b66a3 --- /dev/null +++ b/src/js/Alert.js @@ -0,0 +1,8 @@ +const fg = require("fs") +class Alert { + constructor(){ + this.alerts = fg.readFileSync("alerts.json","utf8"); + } +} + +export default Alert; diff --git a/src/json/alerts.json b/src/json/alerts.json new file mode 100644 index 00000000..5cee1d61 --- /dev/null +++ b/src/json/alerts.json @@ -0,0 +1,7 @@ +{ + "Alert":[ + {"message":"This is only a test", + "background":"darkblue", + "color":"white"} + ] +} From 686689523bc547d2f25851a0ccd01b86640e9a5e Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Wed, 18 Jan 2023 14:47:50 -0400 Subject: [PATCH 028/274] saving --- src/index.html | 1 + src/js/Alert.js | 12 +++++++++++- src/js/ProductDetails.mjs | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index daedc36c..39c2659c 100644 --- a/src/index.html +++ b/src/index.html @@ -112,6 +112,7 @@

    Rimrock Tent - 2-Person, 3-Season

    +
    ©NOT a real business
    diff --git a/src/js/Alert.js b/src/js/Alert.js index 343b66a3..3fad4232 100644 --- a/src/js/Alert.js +++ b/src/js/Alert.js @@ -1,7 +1,17 @@ const fg = require("fs") class Alert { constructor(){ - this.alerts = fg.readFileSync("alerts.json","utf8"); + this.alerts = JSON.parse(fg.readFileSync("alerts.json","utf8")); + this.alertList = document.createElement("section"); + this.alertList.classList.add("alert-list"); + document.body.appendChild(this.alertList); + this.alerts.forEach(alert => { + let p = document.createElement("p"); + p.style.backgroundColor = alert.bgColor; + p.style.color = alert.fgColor; + p.innerText = alert.message; + this.alertList.appendChild(p); + }); } } diff --git a/src/js/ProductDetails.mjs b/src/js/ProductDetails.mjs index ae771738..b341dab0 100644 --- a/src/js/ProductDetails.mjs +++ b/src/js/ProductDetails.mjs @@ -36,7 +36,7 @@ export default class ProductDetails { .addEventListener("click", this.addToCart.bind(this)); } addToCart() { - setLocalStorage("so-cart", this.product); + setLocalStorage("soCart", this.product); } renderProductDetails(selector) { const element = document.querySelector(selector); From 8f7401dad7dab6204684a55ef6577dec95bd2f44 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Wed, 18 Jan 2023 17:12:29 -0400 Subject: [PATCH 029/274] changes --- src/index.html | 2 -- src/js/Alert.js | 31 ++++++++++++++++--------------- src/js/product.js | 4 ++-- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/index.html b/src/index.html index 39c2659c..1b84b061 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,6 @@ tent image for logo     SleepOutside
    -
    @@ -112,7 +111,6 @@

    Rimrock Tent - 2-Person, 3-Season

    -
    ©NOT a real business
    diff --git a/src/js/Alert.js b/src/js/Alert.js index 3fad4232..b53ccda3 100644 --- a/src/js/Alert.js +++ b/src/js/Alert.js @@ -1,18 +1,19 @@ -const fg = require("fs") +const fs = require("fs"); + class Alert { - constructor(){ - this.alerts = JSON.parse(fg.readFileSync("alerts.json","utf8")); - this.alertList = document.createElement("section"); - this.alertList.classList.add("alert-list"); - document.body.appendChild(this.alertList); - this.alerts.forEach(alert => { - let p = document.createElement("p"); - p.style.backgroundColor = alert.bgColor; - p.style.color = alert.fgColor; - p.innerText = alert.message; - this.alertList.appendChild(p); - }); - } + constructor() { + this.alerts = JSON.parse(fs.readFileSync("alerts.js", "utf8")); + this.alertList = document.createElement("section"); + this.alertList.classList.add("alert-list"); + document.body.appendChild(this.alertList); + this.alerts.forEach(alert => { + let p = document.createElement("p"); + p.style.backgroundColor = alert.bgColor; + p.style.color = alert.fgColor; + p.innerText = alert.message; + this.alertList.appendChild(p); + }); + } } -export default Alert; +export default alert diff --git a/src/js/product.js b/src/js/product.js index f798a090..5dda8a29 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -3,7 +3,8 @@ import ProductData from "./ProductData.mjs"; const dataSource = new ProductData("tents"); const productId = new getParam("product"); -console.log(dataSource.findProductById(productId)); +productId.Id; + function addProductToCart(product) { let cart = getLocalStorage("soCart"); if (cart) { @@ -48,5 +49,4 @@ button.addEventListener("click", function() { document .getElementById("addToCart") .addEventListener("click", addToCartHandler); - From 5b5187167fd0dd1aed888265fb8af10115e570eb Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Thu, 19 Jan 2023 12:09:29 -0400 Subject: [PATCH 030/274] save these changes --- src/js/Alert.js | 19 ------------------- src/js/product.js | 3 ++- 2 files changed, 2 insertions(+), 20 deletions(-) diff --git a/src/js/Alert.js b/src/js/Alert.js index b53ccda3..e69de29b 100644 --- a/src/js/Alert.js +++ b/src/js/Alert.js @@ -1,19 +0,0 @@ -const fs = require("fs"); - -class Alert { - constructor() { - this.alerts = JSON.parse(fs.readFileSync("alerts.js", "utf8")); - this.alertList = document.createElement("section"); - this.alertList.classList.add("alert-list"); - document.body.appendChild(this.alertList); - this.alerts.forEach(alert => { - let p = document.createElement("p"); - p.style.backgroundColor = alert.bgColor; - p.style.color = alert.fgColor; - p.innerText = alert.message; - this.alertList.appendChild(p); - }); - } -} - -export default alert diff --git a/src/js/product.js b/src/js/product.js index 5dda8a29..e7c5fb9b 100644 --- a/src/js/product.js +++ b/src/js/product.js @@ -3,7 +3,7 @@ import ProductData from "./ProductData.mjs"; const dataSource = new ProductData("tents"); const productId = new getParam("product"); -productId.Id; +console.log(productId); function addProductToCart(product) { let cart = getLocalStorage("soCart"); @@ -50,3 +50,4 @@ document .getElementById("addToCart") .addEventListener("click", addToCartHandler); + \ No newline at end of file From ae7c9baeac8e63900ff3da202b285a6db9bd00f8 Mon Sep 17 00:00:00 2001 From: FelixS2000 Date: Fri, 20 Jan 2023 08:12:42 -0400 Subject: [PATCH 031/274] cart's change --- src/cart/index.html | 4 ++-- src/css/style.css | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/cart/index.html b/src/cart/index.html index 5308a84f..2c89ad3d 100644 --- a/src/cart/index.html +++ b/src/cart/index.html @@ -23,15 +23,15 @@ Outside
    -
    +
    - + diff --git a/src/css/style.css b/src/css/style.css index 9cc8740c..8787a06f 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -174,7 +174,10 @@ button { /* max-height: 120px; */ align-items: center; } - +span#superscriptNumber{ + color:crimson; + width: 10px; +} .cart-card__image { grid-row: 1/3; grid-column: 1; From 4c2d16310c163eb2b2f4c9087ce3d887ce0ff6da Mon Sep 17 00:00:00 2001 From: Felix Date: Sat, 21 Jan 2023 21:34:39 -0400 Subject: [PATCH 032/274] product change --- src/js/ProductDetails.mjs | 32 +++++++++++++++++++++--- src/js/product.js | 52 ++++++++++++--------------------------- 2 files changed, 45 insertions(+), 39 deletions(-) diff --git a/src/js/ProductDetails.mjs b/src/js/ProductDetails.mjs index b341dab0..7eaac6b8 100644 --- a/src/js/ProductDetails.mjs +++ b/src/js/ProductDetails.mjs @@ -1,7 +1,7 @@ -import { setLocalStorage } from "./utils.mjs"; +import { getLocalStorage, setLocalStorage } from "./utils.mjs"; function productDetailsTemplate(product) { - return `

    ${product.Brand.Name}

    + return `

    ${product.NameWithoutBrand}

    ${product.NameWithoutBrand}

    Date: Mon, 23 Jan 2023 12:41:56 -0400 Subject: [PATCH 033/274] cart's update --- src/js/ProductDetails.mjs | 6 +- src/js/cart.js | 27 ++++++-- src/js/deleteButtonCart.js | 123 +++++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+), 9 deletions(-) create mode 100644 src/js/deleteButtonCart.js diff --git a/src/js/ProductDetails.mjs b/src/js/ProductDetails.mjs index 7eaac6b8..2ac0b7ec 100644 --- a/src/js/ProductDetails.mjs +++ b/src/js/ProductDetails.mjs @@ -1,7 +1,7 @@ import { getLocalStorage, setLocalStorage } from "./utils.mjs"; function productDetailsTemplate(product) { - return `

    ${product.NameWithoutBrand}

    + return `

    ${product.Brand.Name}

    ${product.NameWithoutBrand}

    cartItemTemplate(item)); - document.querySelector(".product-list").innerHTML = htmlItems.join(""); + const cartItems = getLocalStorage("so-cart") || []; + let cartTotal = document.querySelector(".cart-total") + + /* If there's something in the Cart, display the items and the total sum of them. */ + if (cartItems != null) { + const htmlItems = cartItems.map((item) => cartItemTemplate(item)); + document.querySelector(".product-list").innerHTML = htmlItems.join(""); + + cartTotal.style.display = "block"; // Make appear the total paragraph that is hidden by default + cartTotal.innerHTML = `Total: ${sumTotal(cartItems)}` + + } } function cartItemTemplate(item) { @@ -18,12 +27,18 @@ function cartItemTemplate(item) {

    ${item.Name}

    ${item.Colors[0].ColorName}

    -

    ${item.quantity}

    +

    qty: ${item.quantity}

    $${item.FinalPrice}

    `; - return newItem; } -renderCartContents(); +function sumTotal(cart) { + let total = 0; + cart.forEach(item => total += (item.FinalPrice * item.quantity)); + return total; +} + + +renderCartContents(); diff --git a/src/js/deleteButtonCart.js b/src/js/deleteButtonCart.js new file mode 100644 index 00000000..afde8711 --- /dev/null +++ b/src/js/deleteButtonCart.js @@ -0,0 +1,123 @@ +document.addEventListener("DOMContentLoaded", function(){ + + //select the cart container + const myCartContainer = document.querySelector(".products"); + let check = JSON.parse(localStorage.getItem("so-cart")) + //check if the localstorage is empty + if(check == null) { + const messageEmptyCart = document.createElement("p"); + messageEmptyCart.textContent = "Your cart is empty!"; + messageEmptyCart.style.fontSize = "2rem"; + messageEmptyCart.style.fontWeight = "bold"; + myCartContainer.appendChild(messageEmptyCart); + messageEmptyCart.style.textAlign = "center"; + } + //if the localstorage is not empty + else { + const cards = [...document.querySelectorAll(".cart-card")]; + cards.forEach(card => { + //create delete button + const deleteButton = document.createElement("button"); + deleteButton.textContent = "Delete"; + deleteButton.classList.add("delete-button"); + + //add event listener to delete button + deleteButton.addEventListener("click", deleteProduct) + //create buttons to increase and decrease quantities + const quantityButtons = document.createElement("div"); + quantityButtons.classList.add("quantity-buttons"); + card.appendChild(quantityButtons); + //create decrease button + const decreaseButton = document.createElement("button"); + decreaseButton.textContent = "-"; + decreaseButton.classList.add("decrease-button"); + quantityButtons.appendChild(decreaseButton); + //add delete button just between quantitties modifiers + quantityButtons.appendChild(deleteButton); + //create increase button + const increaseButton = document.createElement("button"); + increaseButton.textContent = "+"; + increaseButton.classList.add("increase-button"); + quantityButtons.appendChild(increaseButton); + //add event listener to all increase button + increaseButton.addEventListener("click", increaseQuantity) + //add event listener to all decrease button + decreaseButton.addEventListener("click", decreaseQuantity) + }) + } + + function deleteProduct(event){ + //get the parent element of the button that was clicked + const productCard = event.target.closest(".cart-card"); + //get the name of the product + const nameProduct = productCard.querySelector(".card__name").textContent; + //remove the product from the localstorage + let cart = JSON.parse(localStorage.getItem("so-cart")); + cart = cart.filter(item => item.Name !== nameProduct); + //set the localstorage + localStorage.setItem("so-cart", JSON.stringify(cart)); + //remove the product from the DOM + productCard.remove(); + //if the cart is empty, display a message + if(cart.length === 0) { + const messageEmptyCart = document.createElement("p"); + messageEmptyCart.textContent = "Your cart is empty!"; + messageEmptyCart.style.fontSize = "2rem"; + messageEmptyCart.style.fontWeight = "bold"; + myCartContainer.appendChild(messageEmptyCart); + messageEmptyCart.style.textAlign = "center"; + } + } + + + function increaseQuantity(event){ + //get the parent element of the button that was clicked + const productCard = event.target.closest(".cart-card"); + //get the name of the product + const nameProduct = productCard.querySelector(".card__name").textContent; + //get the quantity of the product + const quantityProduct = productCard.querySelector(".cart-card__quantity"); + //get the price of the product + const priceProduct = productCard.querySelector(".cart-card__price"); + //get the cart + let cart = JSON.parse(localStorage.getItem("so-cart")); + //find the product in the cart + const product = cart.find(item => item.Name === nameProduct); + //increase the quantity of the product + product.quantity++; + //update the quantity on the DOM + quantityProduct.textContent = product.quantity; + //update the total price of the product + priceProduct.textContent = (product.quantity * product.Price).toFixed(2); + //set the localstorage + localStorage.setItem("so-cart", JSON.stringify(cart)); + //reload + location.reload(); + } + + function decreaseQuantity(event){ + //get the parent element of the button that was clicked + const productCard = event.target.closest(".cart-card"); + //get the name of the product + const nameProduct = productCard.querySelector(".card__name").textContent; + //get the quantity of the product + const quantityProduct = productCard.querySelector(".cart-card__quantity"); + //get the price of the product + const priceProduct = productCard.querySelector(".cart-card__price"); + //get the cart + let cart = JSON.parse(localStorage.getItem("so-cart")); + //find the product in the cart + const product = cart.find(item => item.Name === nameProduct); + //decrease the quantity of the product + product.quantity--; + //update the quantity on the DOM + quantityProduct.textContent = product.quantity; + //update the total price of the product + priceProduct.textContent = (product.quantity * product.Price).toFixed(2); + //set the localstorage + localStorage.setItem("so-cart", JSON.stringify(cart)); + //reload + location.reload(); + } + +}); From f7675fd6676881a9c8fedadb5227367d42b051d6 Mon Sep 17 00:00:00 2001 From: Felix Date: Mon, 23 Jan 2023 12:47:51 -0400 Subject: [PATCH 034/274] cart's page --- src/cart/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cart/index.html b/src/cart/index.html index 2c89ad3d..6d668dc7 100644 --- a/src/cart/index.html +++ b/src/cart/index.html @@ -11,6 +11,7 @@ + From 0b7efa2492f4d015ac4d777a77a828781ffc1519 Mon Sep 17 00:00:00 2001 From: Felix Date: Mon, 23 Jan 2023 17:48:06 -0400 Subject: [PATCH 035/274] product detail's change --- src/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index 1b84b061..3e21082f 100644 --- a/src/index.html +++ b/src/index.html @@ -65,7 +65,7 @@

    Top Products

    +
    ©NOT a real business
    diff --git a/src/js/ProductList.mjs b/src/js/ProductList.mjs index e69de29b..926f85ac 100644 --- a/src/js/ProductList.mjs +++ b/src/js/ProductList.mjs @@ -0,0 +1,29 @@ +import {renderListWithTemplate} from "./utils.mjs" + +function productCardTemplate(product) { + return `
  • + + Image of +

    +

    +

    $

     +
    • ` +} +export default class ProductList{ + constructor(category, dataSource, listElement){ + this.category = category; + this.dataSource = dataSource; + this.listElement = listElement; + } + async init(){ + + const list = await this.dataSource.getData(); + this.renderList(list); + } + renderList(list){ + renderListWithTemplate(productCardTemplate, this.listElement, list); + } +} diff --git a/src/js/main.js b/src/js/main.js index e69de29b..6fb50b63 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,8 @@ +import ProductData from "./ProductData.mjs"; +import ProductList from "./ProductList.mjs"; + +const dataSource = new ProductData("tents"); +const element = document.querySelector(".product-list"); +const listing = new ProductList("Tents", dataSource, element); + +listing.init(); From ce28b48b95cfe3219fa1e2f63ddfbab8e9dd315f Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 24 Jan 2023 13:42:58 -0400 Subject: [PATCH 039/274] product list update --- src/js/ProductList.mjs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/js/ProductList.mjs b/src/js/ProductList.mjs index 926f85ac..57465c11 100644 --- a/src/js/ProductList.mjs +++ b/src/js/ProductList.mjs @@ -4,12 +4,12 @@ function productCardTemplate(product) { return `
  • Image of -

    -

    -

    $

     +

    ${product.Brand.Name}

    +

    ${product.Name}

    +

    $${product.FinalPrice}

    • ` } export default class ProductList{ From c6bd55d602d19a53caca1e577e57d6c9c1d68804 Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 24 Jan 2023 14:02:36 -0400 Subject: [PATCH 040/274] product pages update --- src/index.html | 16 ++++++++-------- src/product_pages/cedar-ridge-rimrock-2.html | 4 ++-- src/product_pages/marmot-ajax-3.html | 4 ++-- src/product_pages/northface-alpine-3.html | 4 ++-- src/product_pages/northface-talus-4.html | 4 ++-- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/index.html b/src/index.html index 482fae58..1f9c7c73 100644 --- a/src/index.html +++ b/src/index.html @@ -5,11 +5,12 @@ Sleep Outside | Home +
    @@ -43,12 +44,12 @@
    image of a high mountain lake
    @@ -67,7 +68,7 @@

    Top Products

  • Marmot Ajax tent

    Marmot

    @@ -78,7 +79,7 @@

    Ajax Tent - 3-Person, 3-Season

  • Talus Tent - 4-Person, 3-Season

    The North Face

    @@ -89,7 +90,7 @@

    Talus Tent - 4-Person, 3-Season

  • Alpine Guide Tent - 3-Person, 4-Season

    The North Face

    @@ -100,7 +101,7 @@

    Alpine Guide Tent - 3-Person, 4-Season

  • Rimrock Tent - 2-Person, 3-Season

    Cedar Ridge

    @@ -111,7 +112,6 @@

    Rimrock Tent - 2-Person, 3-Season

    • -
    ©NOT a real business
    diff --git a/src/product_pages/cedar-ridge-rimrock-2.html b/src/product_pages/cedar-ridge-rimrock-2.html index 9a6c3eda..cc94655e 100644 --- a/src/product_pages/cedar-ridge-rimrock-2.html +++ b/src/product_pages/cedar-ridge-rimrock-2.html @@ -16,7 +16,7 @@

    Top Products

    - +
      ©NOT a real business
      diff --git a/src/product_pages/cedar-ridge-rimrock-2.html b/src/product_pages/cedar-ridge-rimrock-2.html index afa8386b..0ce80aca 100644 --- a/src/product_pages/cedar-ridge-rimrock-2.html +++ b/src/product_pages/cedar-ridge-rimrock-2.html @@ -16,7 +16,7 @@