From e126ded650f6f07e610198576b0a0f536e7c541d Mon Sep 17 00:00:00 2001 From: AFutureWebDev Date: Sat, 29 Jun 2019 16:07:13 -0500 Subject: [PATCH 1/8] iniitial commit --- .vscode/settings.json | 3 +++ public/index.html | 8 ++++++-- public/index.js | 21 ++++++++++++++++++++- 3 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 138da963..496680e0 100644 --- a/public/index.html +++ b/public/index.html @@ -4,10 +4,14 @@ My Store - - + + + + +
+ diff --git a/public/index.js b/public/index.js index 034dbd5e..23cacdad 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,20 @@ -//stuff \ No newline at end of file +//stuff + +function Products(products) { +let productDiv = ""; +for(let i =0; i < products.length; i++) { + let product = products[i]; + productDiv += `
${product.name}
` +} +document.getElementById("products").innerHTML= productDiv; + +} + Products(products); + + function search() { + let searchWord = document.getElementById("searchBox").value; + let filteredProducts = products.filter(p => p.name === searchWord) + + Products(filteredProducts); + } + From a9f45cdab09c4e379033e4a607e4e793b49c6546 Mon Sep 17 00:00:00 2001 From: AFutureWebDev Date: Sun, 30 Jun 2019 22:32:57 -0500 Subject: [PATCH 2/8] added more features --- public/index.html | 16 ++++++++++-- public/index.js | 64 +++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 67 insertions(+), 13 deletions(-) diff --git a/public/index.html b/public/index.html index 496680e0..0f911844 100644 --- a/public/index.html +++ b/public/index.html @@ -9,9 +9,21 @@ - -
+ +

CART

+
+ ITEM +
+ + + +
+ Total + $0.00 +
diff --git a/public/index.js b/public/index.js index 23cacdad..8803de3c 100644 --- a/public/index.js +++ b/public/index.js @@ -1,20 +1,62 @@ -//stuff - function Products(products) { -let productDiv = ""; -for(let i =0; i < products.length; i++) { +let productLi = ""; +let detailsButton = document.createElement('button').value = "More Details"; +let toCartButton = document.createElement('button').value = "Add to Cart"; + +for (let i =0; i < products.length; i++) { let product = products[i]; - productDiv += `
${product.name}
` + productLi += `
  • ${product.name}
    • `; +} +document.getElementById("products").innerHTML= productLi; } -document.getElementById("products").innerHTML= productDiv; +Products(products); + +function moreDetails(id) { + let detailsDiv = document.getElementById(id); + if (detailsDiv !== null) { + if (detailsDiv.style.visibility === "visible") { + detailsDiv.style.visibility = "hidden"; + } else if (detailsDiv.style.visibility === "hidden") { + detailsDiv.style.visibility = "visible"; + } + } } - Products(products); - function search() { - let searchWord = document.getElementById("searchBox").value; - let filteredProducts = products.filter(p => p.name === searchWord) +function addToCart(id) { + let cartItems = document.getElementById('cart-items'); + let product = products.find(function(product) { + return product.id == id; + }); + let li = document.createElement('li'); + li.appendChild(document.createTextNode(product.name)); + cartItems.appendChild(li); + let price = document.createElement('span'); + price.className = "amount"; + price.style.paddingLeft = "10px"; + price.appendChild(document.createTextNode(product.price)); + li.appendChild(price); +} + +function calculateCartTotal() { + let amounts = document.getElementsByClassName("amount"); + let total = 0; + for (let i = 0; i < amounts.length; i++) { + const amount = parseFloat(amounts[i].innerText.replace('$', '')); + total = total + amount; + total = Math.round(total * 100) / 100; + } + console.log(total); + let cartTotal = document.getElementById('cart-total'); + cartTotal.innerText = "$" + total; +} + +function search() { + let searchWord = document.getElementById("searchBox").value; + let filteredProducts = products.filter(p => p.name === searchWord) Products(filteredProducts); - } +} + + From d519c928217f173663a4134f36ebf27132a3e8f6 Mon Sep 17 00:00:00 2001 From: AFutureWebDev Date: Sun, 7 Jul 2019 23:47:55 -0500 Subject: [PATCH 3/8] added more to ACA Store --- public/index.html | 31 +++++++++++++++++++-- public/index.js | 69 ++++++++++++++++++++++++++++++++++++++++++---- public/products.js | 2 +- public/styles.css | 64 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 158 insertions(+), 8 deletions(-) create mode 100644 public/styles.css diff --git a/public/index.html b/public/index.html index 0f911844..7752c330 100644 --- a/public/index.html +++ b/public/index.html @@ -5,11 +5,27 @@ My Store + - -
      +
      +

      ACA Store

      +
      + + +
      @@ -24,6 +40,17 @@

      CART

      Total $0.00 + +

      Please Fill out the Following Form:

      +
      + + + + + + + +
      diff --git a/public/index.js b/public/index.js index 8803de3c..053f1a5c 100644 --- a/public/index.js +++ b/public/index.js @@ -5,12 +5,58 @@ let toCartButton = document.createElement('button').value = "Add to Cart"; for (let i =0; i < products.length; i++) { let product = products[i]; - productLi += `
    • ${product.name}
      • `; + productLi += `
    • ${product.name} +
      + +
      • + + + `; } document.getElementById("products").innerHTML= productLi; } +// didn't finish sessions storage...lost on next step Products(products); +let parsedItems = JSON.parse(sessionStorage.getItem('cart')); + +function populateCart() { +parsedItems.forEach() + let cartItems = document.getElementById('cart-items'); + let li = document.createElement('li'); + let removeButton = document.createElement('button'); + removeButton.innerHTML = "Remove"; + removeButton.addEventListener("click", function(){ + this.parentElement.remove(); + }) + li.appendChild(document.createTextNode(product.name)); + cartItems.appendChild(li); + let price = document.createElement('span'); + price.className = "amount"; + price.style.paddingLeft = "10px"; + price.appendChild(document.createTextNode(product.price)); + li.appendChild(price); + li.append(removeButton); +} + + function moreDetails(id) { let detailsDiv = document.getElementById(id); @@ -22,13 +68,24 @@ function moreDetails(id) { } } } - +// Created this variable for sessionStorage +let cart = []; function addToCart(id) { let cartItems = document.getElementById('cart-items'); let product = products.find(function(product) { return product.id == id; }); + // pushing the items into the array and then adding them into sessionStorage + cart.push(product); + sessionStorage.setItem('cart', JSON.stringify(cart)); + let li = document.createElement('li'); + let removeButton = document.createElement('button'); + removeButton.innerHTML = "Remove"; + removeButton.addEventListener("click", function(){ + this.parentElement.remove(); + calculateCartTotal(); + }) li.appendChild(document.createTextNode(product.name)); cartItems.appendChild(li); let price = document.createElement('span'); @@ -36,8 +93,11 @@ function addToCart(id) { price.style.paddingLeft = "10px"; price.appendChild(document.createTextNode(product.price)); li.appendChild(price); + li.append(removeButton); } + + function calculateCartTotal() { let amounts = document.getElementsByClassName("amount"); let total = 0; @@ -52,11 +112,10 @@ function calculateCartTotal() { } function search() { - let searchWord = document.getElementById("searchBox").value; - let filteredProducts = products.filter(p => p.name === searchWord) + let searchWord = document.getElementById("searchBox").value.toLowerCase(); + let filteredProducts = products.filter(p => p.name.toLowerCase() === searchWord) Products(filteredProducts); } - diff --git a/public/products.js b/public/products.js index 0e2facb6..6dfce0f7 100644 --- a/public/products.js +++ b/public/products.js @@ -2,7 +2,7 @@ const products = [{ "id": 1, "name": "Body Luxuries Sweet Lavender Hand Sanitizer", "description": "Makes your hands clean", - "reviews": 46, + "reviewsNum": 46, "rating": 2, "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", "price": "$95.11", diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 00000000..10372af2 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,64 @@ +#title { + text-align: center; + font-size: 50px; + font-weight: bold; +} + +#search { + display: flex; + flex-direction: row; + justify-content: center; +} + +#searchBox { + width: 500px; + height: 25px; + border: 1px solid black; + margin-right: 5px; +} + +#find { + border: 1px solid black; + color: white; + background-color: black; + margin-right: 20px; + height: 30px; +} + +#find:hover { + color: black; + background-color: lightgray; +} + +#cat-container { + display: flex; + flex-direction: row; + justify-content: center; + height: 30px; +} + +#categories { + border: 1px solid black; +} + +h3 { + margin-right: 5px; + text-align: start; + margin-top: 5px; +} + +#products { + font-weight: bold; + list-style-type: none; + font-size: 20px; +} + +.details { + font-weight: 400; + font-size: 15px; +} + +#checkout { + margin-top: 10px; +} + From d534cc6c18108aa2f9733d021c8434d4da1fed24 Mon Sep 17 00:00:00 2001 From: AFutureWebDev Date: Sun, 14 Jul 2019 10:48:58 -0500 Subject: [PATCH 4/8] updated a few things --- public/index.html | 88 +++++++++++++++++++++++++++-------------------- public/index.js | 27 +++++++++++++-- public/styles.css | 1 - 3 files changed, 76 insertions(+), 40 deletions(-) diff --git a/public/index.html b/public/index.html index 7752c330..a2b0ef43 100644 --- a/public/index.html +++ b/public/index.html @@ -9,48 +9,62 @@ -
      -

      ACA Store

      -
      - diff --git a/public/index.js b/public/index.js index 932a676a..9877ae9c 100644 --- a/public/index.js +++ b/public/index.js @@ -12,6 +12,14 @@ window.onload = function() { txtPassword = document.getElementById("password"); btnSignUp = document.getElementById("btn-signup"); btnSignUp.onclick = signUp; + adminBtn = document.getElementById("admin-btn"); + adminBtn.onclick = admin; + adminContainer = document.getElementById("admin-container"); + txtName = document.getElementById("product-name"); + txtDescription = document.getElementById("product-description"); + txtPrice = document.getElementById("product-price"); + btnSave = document.getElementById("save-btn"); + btnSave.onclick = save; } class User { @@ -33,6 +41,8 @@ function signUp() { }, body: JSON.stringify(newUser) }).then(response => response.json()); + console.log(newUser); + localStorage.setItem('newUser', JSON.stringify(newUser)); } function showHome() { @@ -75,10 +85,6 @@ for (let i =0; i < products.length; i++) { document.getElementById("products").innerHTML= productLi; } -// didn't finish sessions storage...lost on next step -Products(products); -let parsedItems = JSON.parse(sessionStorage.getItem('cart')); - function populateCart() { parsedItems.forEach() let cartItems = document.getElementById('cart-items'); @@ -110,17 +116,12 @@ function moreDetails(id) { } } } -// Created this variable for sessionStorage -let cart = []; + function addToCart(id) { let cartItems = document.getElementById('cart-items'); let product = products.find(function(product) { return product.id == id; }); - // pushing the items into the array and then adding them into sessionStorage - cart.push(product); - sessionStorage.setItem('cart', JSON.stringify(cart)); - let li = document.createElement('li'); let removeButton = document.createElement('button'); removeButton.innerHTML = "Remove"; @@ -161,3 +162,30 @@ function search() { } +class Save { + constructor(name, description, price) { + this.name = name; + this.description = description; + this.price = price; + } + } + +function admin(){ + adminContainer.style.display = "block"; +} + +function save() { + let newProduct = new Save(txtName.value, txtDescription.value, txtPrice.value); + fetch("https://acastore.herokuapp.com/products", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newProduct) + }).then(response => response.json()); + console.log(newProduct); + localStorage.setItem('newProduct', JSON.stringify(newProduct)); + Products(products); +} + + diff --git a/public/styles.css b/public/styles.css index 114cbbad..750ef523 100644 --- a/public/styles.css +++ b/public/styles.css @@ -55,8 +55,18 @@ h3 { #products { font-weight: bold; font-size: 20px; + /* display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; */ } +/* .details { + display: flex; + justify-content: column; + justify-content: center; +} */ + .details { font-weight: 400; font-size: 15px;