From 159a32ddcff23aed64064839c6e93df08be6f767 Mon Sep 17 00:00:00 2001 From: 3dcantaloupe <66147967+3dcantaloupe@users.noreply.github.com> Date: Wed, 7 Aug 2024 17:58:50 -0700 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=A6=B4=20title=20setup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/compare-stores.html | 16 +++++++++++++++- source/css/compare-stores.css | 12 ++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 source/css/compare-stores.css diff --git a/source/compare-stores.html b/source/compare-stores.html index c9ccb74..5c9eca8 100644 --- a/source/compare-stores.html +++ b/source/compare-stores.html @@ -5,6 +5,7 @@ + Go Go Grocery! @@ -18,7 +19,20 @@

Go Go Grocery

-

WIREFRAME PAGE 2

+
+

John's Monday Grocery Run

+
+
+
+ +
+
A
+
B
+
C
+
+ + +
diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css new file mode 100644 index 0000000..e819a3c --- /dev/null +++ b/source/css/compare-stores.css @@ -0,0 +1,12 @@ +.title-child{ + display: inline-block; + +} +.title-child-right{ + float: right; +} + +.stores-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } \ No newline at end of file From 8c76b9a1dc229dd69d824ac531d1d431fea95394 Mon Sep 17 00:00:00 2001 From: 3dcantaloupe <66147967+3dcantaloupe@users.noreply.github.com> Date: Fri, 9 Aug 2024 20:38:14 -0700 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=9A=98=20stores=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/compare-stores.html | 67 +++++++++++++++++++++++--- source/css/compare-stores.css | 90 +++++++++++++++++++++++++++++++++-- source/js/compare-stores.js | 50 +++++++++++++++++++ 3 files changed, 195 insertions(+), 12 deletions(-) create mode 100644 source/js/compare-stores.js diff --git a/source/compare-stores.html b/source/compare-stores.html index 5c9eca8..c48108c 100644 --- a/source/compare-stores.html +++ b/source/compare-stores.html @@ -6,6 +6,8 @@ + + Go Go Grocery! @@ -20,16 +22,67 @@

Go Go Grocery

-

John's Monday Grocery Run

-
-
+

+ John's Monday Grocery Run + +

+
+ + + + +
+
-
-
A
-
B
-
C
+
+
+ Walmart Logo + +
+ + +
+
+
+ Ralphs Logo + +
+ + +
+
+
+ Costco Logo + +
+ + +
+
+ diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css index e819a3c..6c9729f 100644 --- a/source/css/compare-stores.css +++ b/source/css/compare-stores.css @@ -1,12 +1,92 @@ -.title-child{ +/* .title-child{ display: inline-block; +} */ + +.title { + display: flex; + justify-content: space-between; /* Aligns text left and buttons right */ + align-items: center; /* Aligns text and buttons vertically at the same level */ + padding: 10px; /* Optional: Adds padding around the title */ +} + +.list-name { + margin: 0; /* Removes default margin to align properly */ } -.title-child-right{ - float: right; + +.title-child-right { + display: flex; + gap: 10px; /* Adds space between the buttons */ } + +/* .title{ + display: flex; + justify-content: flex-end; /* Aligns the buttons to the right */ + /* gap: 10px; Adds space between the buttons */ + +/* } */ + + .stores-grid { display: grid; - grid-template-columns: 1fr 1fr 1fr; - } \ No newline at end of file + grid-template-columns: repeat(3, 1fr); + gap: 10px; + padding: 10px; + } + +.menuBTN { + background-color: #7c9e57; /* Green */ + border: none; + padding: 7px 28px; + text-align: center; + text-decoration: none; + /* display: inline-block; */ + font-size: 24px; + border-radius: 12px; + font-weight: bold; + /* float: right; */ +} + +.store { + background-color: #f8f9fa; + padding: 15px; + border-radius: 10px; + text-align: center; + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} + +.store img { + width: 50px; + height: 50px; + margin-bottom: 10px; + border-radius: 50%; +} + +.store-title { + background-color: #2e2d4d; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + margin-bottom: 10px; +} + +.store-title:hover { + background-color: #0056b3; +} + +.store-dropdown { + margin-top: 10px; +} + +.store-select { + padding: 5px; + border-radius: 5px; + border: 1px solid #ccc; +} \ No newline at end of file diff --git a/source/js/compare-stores.js b/source/js/compare-stores.js new file mode 100644 index 0000000..45d1db5 --- /dev/null +++ b/source/js/compare-stores.js @@ -0,0 +1,50 @@ +// const costcoColor = '#71677c'; +// const walmartColor = '#945d5e'; +// const targetColor = '#8de969'; +// const ralphsColor = '#337357'; + +document.getElementById('addColumnBtn').addEventListener('click', function() { + const gridContainer = document.getElementById('gridContainer'); + let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; + gridContainer.style.gridTemplateColumns = `repeat(${columnCount + 1}, 1fr)`; + + const newItem = document.createElement('div'); + newItem.className = 'store'; + newItem.textContent = `Item ${gridContainer.children.length + 1}`; + gridContainer.appendChild(newItem); +}); + +document.getElementById('removeColumnBtn').addEventListener('click', function() { + const gridContainer = document.getElementById('gridContainer'); + let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; + + if (columnCount > 1) { // Ensure there's at least 1 column + gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; + + // Remove the last item in the grid + if (gridContainer.children.length > 0) { + gridContainer.removeChild(gridContainer.lastChild); + } + } else { + alert('You must have at least one store!'); + } +}); + + +document.querySelectorAll('.store-select').forEach(select => { + select.addEventListener('change', function() { + const store = this.closest('.store'); + const selectedValue = this.value; + const storeTitle = store.querySelector('.store-title'); + + // Change the title to the selected store + storeTitle.textContent = selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1); + + // Change the image based on selection + const storeImage = store.querySelector('img'); + storeImage.src = `./assets/images/${selectedValue}-icon.png`; // Ensure the images are named accordingly + storeImage.alt = `${selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1)} Logo`; + store.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); + // store.style.backgroundColor = selectedValue === 'costco' ? costcoColor : selectedValue === 'walmart' ? walmartColor : selectedValue === 'target' ? targetColor : ralphsColor; + }); +}); From 3d62f2613366cef2036c52ced196a4ef9e7f5dbd Mon Sep 17 00:00:00 2001 From: 3dcantaloupe <66147967+3dcantaloupe@users.noreply.github.com> Date: Fri, 9 Aug 2024 21:08:48 -0700 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=9A=88=20Add=20store=20functionality?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/compare-stores.html | 9 ++-- source/css/compare-stores.css | 22 ++++++-- source/js/compare-stores.js | 98 +++++++++++++++++++++++------------ 3 files changed, 89 insertions(+), 40 deletions(-) diff --git a/source/compare-stores.html b/source/compare-stores.html index c48108c..dcccdfc 100644 --- a/source/compare-stores.html +++ b/source/compare-stores.html @@ -27,9 +27,9 @@

Go Go Grocery

- + - +
@@ -56,7 +56,7 @@

Go Go Grocery

@@ -70,8 +70,9 @@

Go Go Grocery

diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css index 6c9729f..51066b5 100644 --- a/source/css/compare-stores.css +++ b/source/css/compare-stores.css @@ -48,7 +48,7 @@ /* float: right; */ } -.store { +/* .store { background-color: #f8f9fa; padding: 15px; border-radius: 10px; @@ -57,12 +57,25 @@ display: flex; flex-direction: column; align-items: center; + +} */ + +.store { + background-color: #f8f9fa; + padding: 15px; + border-radius: 10px; + text-align: left; + position: relative; + display: flex; + flex-direction: row; /* Change to row to align items horizontally */ + align-items: center; /* Center items vertically */ + justify-content: space-between; /* Optional: Space elements evenly */ } .store img { width: 50px; height: 50px; - margin-bottom: 10px; + /* margin-bottom: 10px; */ border-radius: 50%; } @@ -73,8 +86,9 @@ padding: 10px 20px; border-radius: 5px; cursor: pointer; - font-size: 16px; - margin-bottom: 10px; + font-size: 24px; + /* margin-bottom: 10px; */ + font-weight: bold; } .store-title:hover { diff --git a/source/js/compare-stores.js b/source/js/compare-stores.js index 45d1db5..c6ecd7d 100644 --- a/source/js/compare-stores.js +++ b/source/js/compare-stores.js @@ -3,48 +3,82 @@ // const targetColor = '#8de969'; // const ralphsColor = '#337357'; -document.getElementById('addColumnBtn').addEventListener('click', function() { +document.getElementById('addStoreBtn').addEventListener('click', function() { + // var stores = document.getElementById('gridContainer').children; const gridContainer = document.getElementById('gridContainer'); let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; - gridContainer.style.gridTemplateColumns = `repeat(${columnCount + 1}, 1fr)`; - const newItem = document.createElement('div'); - newItem.className = 'store'; - newItem.textContent = `Item ${gridContainer.children.length + 1}`; - gridContainer.appendChild(newItem); -}); - -document.getElementById('removeColumnBtn').addEventListener('click', function() { - const gridContainer = document.getElementById('gridContainer'); - let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; + if (columnCount < 5) { // Ensure there's less than 5 columns + gridContainer.style.gridTemplateColumns = `repeat(${columnCount + 1}, 1fr)`; - if (columnCount > 1) { // Ensure there's at least 1 column - gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; - - // Remove the last item in the grid - if (gridContainer.children.length > 0) { - gridContainer.removeChild(gridContainer.lastChild); - } + const newItem = document.createElement('div'); + newItem.className = 'store'; + newItem.innerHTML = ` + Walmart Logo + +
+ + +
+ `; + newItem.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); + // newItem.textContent = `Item ${gridContainer.children.length + 1}`; + gridContainer.appendChild(newItem); + const newSelect = newItem.querySelector('.store-select'); + newSelect.addEventListener('change', function() { + updateStore(newSelect); + }); + } else { - alert('You must have at least one store!'); + alert('You have reached the max amount of store comparisons!'); } + + }); +// document.getElementById('removeColumnBtn').addEventListener('click', function() { +// const gridContainer = document.getElementById('gridContainer'); +// let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; + +// if (columnCount > 1) { // Ensure there's at least 1 column +// gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; + +// // Remove the last item in the grid +// if (gridContainer.children.length > 0) { +// gridContainer.removeChild(gridContainer.lastChild); +// } +// } else { +// alert('You must have at least one store!'); +// } +// }); + + +function updateStore(selectElement) { + const store = selectElement.closest('.store'); + const selectedValue = selectElement.value; + const storeTitle = store.querySelector('.store-title'); + + // Change the title to the selected store + storeTitle.textContent = selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1); + + // Change the image based on selection + const storeImage = store.querySelector('img'); + storeImage.src = `./assets/images/${selectedValue}-icon.png`; // Ensure the images are named accordingly + storeImage.alt = `${selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1)} Logo`; + store.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); + // store.style.backgroundColor = selectedValue === 'costco' ? costcoColor : selectedValue === 'walmart' ? walmartColor : selectedValue === 'target' ? targetColor : ralphsColor; +} document.querySelectorAll('.store-select').forEach(select => { select.addEventListener('change', function() { - const store = this.closest('.store'); - const selectedValue = this.value; - const storeTitle = store.querySelector('.store-title'); - - // Change the title to the selected store - storeTitle.textContent = selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1); - - // Change the image based on selection - const storeImage = store.querySelector('img'); - storeImage.src = `./assets/images/${selectedValue}-icon.png`; // Ensure the images are named accordingly - storeImage.alt = `${selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1)} Logo`; - store.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); - // store.style.backgroundColor = selectedValue === 'costco' ? costcoColor : selectedValue === 'walmart' ? walmartColor : selectedValue === 'target' ? targetColor : ralphsColor; + updateStore(select); }); + }); + + From 1cce7edd287ce0c72ab63e4665345254d3145d2e Mon Sep 17 00:00:00 2001 From: 3dcantaloupe <66147967+3dcantaloupe@users.noreply.github.com> Date: Fri, 9 Aug 2024 21:16:42 -0700 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=97=BC=20Delete=20store=20funtionalit?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/compare-stores.html | 3 +++ source/css/compare-stores.css | 20 ++++++++++++++++++++ source/js/compare-stores.js | 22 ++++++++++++++++++++++ 3 files changed, 45 insertions(+) diff --git a/source/compare-stores.html b/source/compare-stores.html index dcccdfc..288febf 100644 --- a/source/compare-stores.html +++ b/source/compare-stores.html @@ -37,6 +37,7 @@

Go Go Grocery

+ Walmart Logo
@@ -50,6 +51,7 @@

Go Go Grocery

+ Ralphs Logo
@@ -63,6 +65,7 @@

Go Go Grocery

+ Costco Logo
diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css index 51066b5..b82d4ab 100644 --- a/source/css/compare-stores.css +++ b/source/css/compare-stores.css @@ -103,4 +103,24 @@ padding: 5px; border-radius: 5px; border: 1px solid #ccc; +} + +.delete-store-btn { + position: absolute; + top: 2px; + right: 2px; + background-color: transparent; + color: white; + border: none; + border-radius: 50%; + width: 25px; + height: 25px; + font-size: 18px; + cursor: pointer; + text-align: center; + line-height: 22px; +} + +.delete-store-btn:hover { + background-color: darkred; } \ No newline at end of file diff --git a/source/js/compare-stores.js b/source/js/compare-stores.js index c6ecd7d..d850cf6 100644 --- a/source/js/compare-stores.js +++ b/source/js/compare-stores.js @@ -14,6 +14,7 @@ document.getElementById('addStoreBtn').addEventListener('click', function() { const newItem = document.createElement('div'); newItem.className = 'store'; newItem.innerHTML = ` + Walmart Logo
@@ -82,3 +83,24 @@ document.querySelectorAll('.store-select').forEach(select => { }); +document.getElementById('gridContainer').addEventListener('click', function(e) { + + + const gridContainer = document.getElementById('gridContainer'); + let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; + + if (columnCount > 1) { // Ensure there's at least 1 column + if (e.target.classList.contains('delete-store-btn')) { + const store = e.target.closest('.store'); + store.remove(); + } + gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; + + // // Remove the last item in the grid + // if (gridContainer.children.length > 0) { + // gridContainer.removeChild(gridContainer.lastChild); + // } + } else { + alert('You must have at least one store!'); + } +}); From 6861ba00eeb0d0c013f3cea080d96d69d040c99c Mon Sep 17 00:00:00 2001 From: 3dcantaloupe <66147967+3dcantaloupe@users.noreply.github.com> Date: Fri, 9 Aug 2024 21:22:04 -0700 Subject: [PATCH 5/6] =?UTF-8?q?=E2=9B=A9=20fixed=20selection=20deletion=20?= =?UTF-8?q?bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/js/compare-stores.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/source/js/compare-stores.js b/source/js/compare-stores.js index d850cf6..6509346 100644 --- a/source/js/compare-stores.js +++ b/source/js/compare-stores.js @@ -84,23 +84,17 @@ document.querySelectorAll('.store-select').forEach(select => { document.getElementById('gridContainer').addEventListener('click', function(e) { - - - const gridContainer = document.getElementById('gridContainer'); - let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; + if (e.target.classList.contains('delete-store-btn')) { + const store = e.target.closest('.store'); + const gridContainer = document.getElementById('gridContainer'); + let columnCount = getComputedStyle(gridContainer).gridTemplateColumns.split(' ').length; - if (columnCount > 1) { // Ensure there's at least 1 column - if (e.target.classList.contains('delete-store-btn')) { - const store = e.target.closest('.store'); + if (columnCount > 1) { // Ensure there's at least 1 column left after deletion store.remove(); + gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; + } else { + alert('You must have at least one store!'); } - gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; - - // // Remove the last item in the grid - // if (gridContainer.children.length > 0) { - // gridContainer.removeChild(gridContainer.lastChild); - // } - } else { - alert('You must have at least one store!'); } }); + From 0f79f4cf3b6f0d18c0cd38765538c98e23b8a83b Mon Sep 17 00:00:00 2001 From: 3dcantaloupe <66147967+3dcantaloupe@users.noreply.github.com> Date: Sat, 10 Aug 2024 02:28:59 -0700 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=9A=BF=20Added=20items,=20total,=20an?= =?UTF-8?q?d=20pretty=20much=20everything=20else?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/compare-stores.html | 282 +++++++++++++++++++++++++++------- source/css/compare-stores.css | 83 ++++++++-- source/js/compare-stores.js | 88 ++++++++++- 3 files changed, 386 insertions(+), 67 deletions(-) diff --git a/source/compare-stores.html b/source/compare-stores.html index 288febf..c9c76f4 100644 --- a/source/compare-stores.html +++ b/source/compare-stores.html @@ -12,20 +12,34 @@ -
- placeholder icon +
+

Go Go Grocery

- Search - Shopping List - Sign In -
+
+
+ + Search Items +
+
+ + Shopping List +
+
+ + Sign In +
+
+

- John's Monday Grocery Run - -

+ John's Monday Grocery Run + + + + +
@@ -36,58 +50,218 @@

Go Go Grocery

-
- - Walmart Logo - -
- - +
+
+ + Walmart Logo + +
+ + +
+ +
+
+ Grapes + $4.70 +
+
+ Oreo + $5.98 +
+
+ Chicken Breast + $12.19 +
+
+ Penne Pasta + $1.18 +
+
+ 1 Tomato + $0.27 +
+
+ Bacon + $3.44 +
+
+ Eggs + $3.28 +
+
+ Milk + $3.78 +
+
+ +
+ Subtotal: + $8.47 +
+ +
+ Total: + $8.47 +
+
-
- - Ralphs Logo - -
- - +
+
+ + Ralphs Logo + +
+ + +
+
+ +
+
+ Grapes + $4.70 +
+
+ Oreo + $5.98 +
+
+ Chicken Breast + $12.19 +
+
+ Penne Pasta + $1.18 +
+
+ 1 Tomato + $0.27 +
+
+ Bacon + $3.44 +
+
+ Eggs + $3.28 +
+
+ Milk + $3.78 +
+
+ Bananas + $1.29 +
+
+ Orange Juice + $4.99 +
+
+ Cereal + $3.79 +
+
+ Cheese + $2.50 +
+
+ Apples + $3.20 +
+
+ Yogurt + $1.99 +
+
+ Chocolate Bar + $1.50 +
+ + +
+ +
+ Subtotal: + $8.47 +
+ +
+ Total: + $8.47
-
- - Costco Logo - -
- - +
+
+ + Costco Logo + +
+ + +
+
+ +
+
+ Grapes + $4.70 +
+
+ Oreo + $5.98 +
+
+ 1 Tomato + $0.27 +
+
+ Bacon + $3.44 +
+
+ Eggs + $3.28 +
+
+ Milk + $3.78 +
+
+ Kinder Joy + $1.49 +
+
+ +
+ Subtotal: + $8.47 +
+ +
+ Total: + $8.47
- - diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css index b82d4ab..e46c79f 100644 --- a/source/css/compare-stores.css +++ b/source/css/compare-stores.css @@ -35,6 +35,15 @@ padding: 10px; } +#editListBtn { + background-color: transparent; /* Dark Blue */ + border: none; + font-size: large; + + font-weight: bold; + cursor: pointer; +} + .menuBTN { background-color: #7c9e57; /* Green */ border: none; @@ -45,22 +54,27 @@ font-size: 24px; border-radius: 12px; font-weight: bold; + cursor: pointer; /* float: right; */ } -/* .store { - background-color: #f8f9fa; - padding: 15px; - border-radius: 10px; +.menuBTN:hover { + background-color: #4f6834; /* Darker Green */ +} + +.store { + background-color: transparent; + /* padding: 15px; */ + /* border-radius: 10px; */ text-align: center; position: relative; display: flex; flex-direction: column; - align-items: center; + /* align-items: center; */ -} */ +} -.store { +.storeTitleBar { background-color: #f8f9fa; padding: 15px; border-radius: 10px; @@ -69,10 +83,11 @@ display: flex; flex-direction: row; /* Change to row to align items horizontally */ align-items: center; /* Center items vertically */ + justify-content: space-between; /* Optional: Space elements evenly */ } -.store img { +.storeTitleBar img { width: 50px; height: 50px; /* margin-bottom: 10px; */ @@ -92,7 +107,7 @@ } .store-title:hover { - background-color: #0056b3; + background-color: #4e4c82; } .store-dropdown { @@ -123,4 +138,52 @@ .delete-store-btn:hover { background-color: darkred; -} \ No newline at end of file +} + + +.storeItems { + margin-top: 10px; + padding: 10px; + background-color: #ffffff; + border-radius: 10px; + max-height:315px; + min-height:315px; + overflow-y:scroll; + +} + +.item { + display: flex; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid #ddd; +} + +.item:last-child { + border-bottom: none; +} + +.item-name { + font-weight: bold; + font-size:larger; +} + +.item-price { + color: #2f2f2f; +} + +.subtotal, .total { + display: flex; + justify-content: space-between; + padding: 10px; + margin-top: 10px; + background-color: #272d32; + border-radius: 10px; + font-weight: bold; + font-size: 16px; +} + +.subtotal-price, .total-price { + color: #ffffff; +} + diff --git a/source/js/compare-stores.js b/source/js/compare-stores.js index 6509346..a771db0 100644 --- a/source/js/compare-stores.js +++ b/source/js/compare-stores.js @@ -14,6 +14,7 @@ document.getElementById('addStoreBtn').addEventListener('click', function() { const newItem = document.createElement('div'); newItem.className = 'store'; newItem.innerHTML = ` +
Walmart Logo @@ -26,8 +27,56 @@ document.getElementById('addStoreBtn').addEventListener('click', function() {
+
+ +
+
+ Grapes + $4.70 +
+
+ Oreo + $5.98 +
+
+ Chicken Breast + $12.19 +
+
+ Penne Pasta + $1.18 +
+
+ 1 Tomato + $0.27 +
+
+ Bacon + $3.44 +
+
+ Eggs + $3.28 +
+
+ Milk + $3.78 +
+
+ +
+ Subtotal: + $8.47 +
+ +
+ Total: + $8.47 +
`; - newItem.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); + newItem.getElementsByClassName('storeTitleBar')[0].style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); + calculateSubtotal(newItem); + calculateTotal(newItem); // newItem.textContent = `Item ${gridContainer.children.length + 1}`; gridContainer.appendChild(newItem); const newSelect = newItem.querySelector('.store-select'); @@ -68,10 +117,10 @@ function updateStore(selectElement) { storeTitle.textContent = selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1); // Change the image based on selection - const storeImage = store.querySelector('img'); + const storeImage = store.getElementsByClassName('storeTitleBar')[0].querySelector('img'); storeImage.src = `./assets/images/${selectedValue}-icon.png`; // Ensure the images are named accordingly storeImage.alt = `${selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1)} Logo`; - store.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); + store.getElementsByClassName('storeTitleBar')[0].style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); // store.style.backgroundColor = selectedValue === 'costco' ? costcoColor : selectedValue === 'walmart' ? walmartColor : selectedValue === 'target' ? targetColor : ralphsColor; } @@ -98,3 +147,36 @@ document.getElementById('gridContainer').addEventListener('click', function(e) { } }); + +function calculateSubtotal(storeElement) { + const items = storeElement.querySelectorAll('.item-price'); + let subtotal = 0; + + items.forEach(item => { + subtotal += parseFloat(item.textContent.replace('$', '')); + }); + + storeElement.querySelector('.subtotal-price').textContent = `$${subtotal.toFixed(2)}`; +} + +function calculateTotal(storeElement) { + const subtotal = parseFloat(storeElement.querySelector('.subtotal-price').textContent.replace('$', '')); + const tax = subtotal * 0.0725; + const total = subtotal + tax; + + storeElement.querySelector('.total-price').textContent = `$${total.toFixed(2)}`; +} + +document.querySelectorAll('.store').forEach(store => { + calculateSubtotal(store); + calculateTotal(store); + store.getElementsByClassName('storeTitleBar')[0].style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); +}); + +document.getElementById('editListBtn').addEventListener('click', function() { + document.getElementById('listHeading').contentEditable = true; +}); + +document.getElementById('addItemBtn').addEventListener('click', function() { + window.location.href = "item-price.html"; +}); \ No newline at end of file