From e51611ca4c76ac2113b8d6ae6c5ebf36d952ae51 Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Sun, 15 Sep 2024 23:30:45 -0700 Subject: [PATCH 1/5] Removed redundancies on index.css and user-page.css. Additionally, I finished standardizing index.html. --- source/css/index.css | 124 ++++++++++++++++++++++++--------------- source/css/main.css | 2 + source/css/user-page.css | 34 ++++++----- source/index.html | 30 ++++------ source/user-page.html | 2 +- 5 files changed, 109 insertions(+), 83 deletions(-) diff --git a/source/css/index.css b/source/css/index.css index c126b1a..8b1f9b0 100644 --- a/source/css/index.css +++ b/source/css/index.css @@ -1,72 +1,100 @@ -.sign-up{ - background-color: rgba(254, 153, 32, 0.80); - padding: 7.5px; - padding-bottom: 50px; - - font-size: 200%; - - padding-left: 30px; - +.sign-up { + background-color: #fe9920cc; + padding: 1em; + font-size: 200%; + padding-left: 30px; } -.header-links{ - padding-left: 50px; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - column-gap: 50px; - - font-size: 165% +.header-container p { + margin: 0 0 2em 0; } -.info-splurge{ - font-size: 200%; +.header-container h1 { + margin: 0.5em 0 0 0; } -.grid{ - display: grid; - grid-template-columns: 1fr 1fr; +.interface-button { + flex-grow: 0.75; + height: auto; + border: none; + border-radius: 1.5em; + white-space: nowrap; + background: #fe9920; + flex-grow: 0.75; + height: auto; + text-align: center; + border: none; + color: #000000; + font-size: 70%; + margin: 0; + text-decoration: none; + text-align: center; + padding: 1em 7.5em; +} +.interface-button:hover { + background-color: #fe910b; } -.info-splurge{ - padding-left: 25px; +.interface-button:focus:not(:focus-visible):not(.focus-visible) { + box-shadow: none; + outline: none; } -#sign-up-button{ - background: #FE9920; - padding-top:5px; - padding-bottom:5px; - padding-left: 20px; - padding-right: 20px; - width:300px; - height:50px; +.interface-button:focus { + box-shadow: #f48701 0 0 3px; + outline: none; +} - font-size: 70%; +.interface-button:disabled { + border-color: #1b1f231a; + color: #ffffffcc; + cursor: default; +} - border-radius: 10px; +.interface-button:active { + background-color: #df7b01; + box-shadow: #14462033 0 1px 0 inset; +} +.info-splurge { + padding: 0 2em; +} +.info-splurge h2 { + font-size: 2.5em; + padding: 0; + margin-bottom: 0; } -#wholefoods-icon{ - border-radius: 50px; +.info-splurge p { + font-size: 1.75em; + margin-top: 0; } -#walmart-icon{ - border-radius: 50px; +.header-links { + padding-left: 50px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 50px; + font-size: 165%; } -#costco-icon{ - border-radius: 50px; +.grid { + display: grid; + grid-auto-columns: auto; + grid-template-columns: 1fr 1fr; } -.column{ - display: flex; - align-items: center; - justify-content: center; +.brand-images { + display: flex; + flex-direction: column; + align-self: center; + height: auto; + width: auto; } -.brand-images{ - display: flex; - flex-direction: column; - align-self: center; -} \ No newline at end of file +.image { + height: 6em; + width: 6em; + border-radius: 5em; +} diff --git a/source/css/main.css b/source/css/main.css index e93cd3c..64fea5e 100644 --- a/source/css/main.css +++ b/source/css/main.css @@ -26,6 +26,8 @@ body { /* Prevents tiling of background gradients or images */ max-width: 100vw; /* Gets rid of unnecessary scroll bar that appeared on some screens */ + background-image: url(../assets/images/gradient-bg-img.png); + background-size: cover; } body { diff --git a/source/css/user-page.css b/source/css/user-page.css index 47baa8e..d339606 100644 --- a/source/css/user-page.css +++ b/source/css/user-page.css @@ -1,4 +1,4 @@ -#user-page { +body { background-image: url(../assets/images/gradient-bg-img.png); background-size: cover; } @@ -7,7 +7,7 @@ display: flex; flex-direction: row; align-content: space-between; - background-color: #fe9920; + background-color: #fe9920cc; width: 100vw; padding-bottom: 8em; } @@ -23,11 +23,11 @@ color: #000000; font-size: 1.5em; font-weight: 600; - margin: 0em 1em; + margin: 0; text-decoration: none; text-align: center; height: 15rem; - padding: 3em 0; + padding: 1em; } .user-greeting { @@ -92,43 +92,45 @@ .green-box { display: flex; flex-direction: column; - margin: 0em; - padding: 0; + margin: 0 1em; + padding: 0em; background-color: #7c9e57; border-radius: 2em; + width: auto; } .interface-button { flex-grow: 0.75; height: auto; background-color: #7c9e57; + text-align: center; border: none; border-radius: 2em; } -.user-links button:hover { +.interface-button:hover { background-color: #719150; } -.user-links button:focus:not(:focus-visible):not(.focus-visible) { +.interface-button:focus:not(:focus-visible):not(.focus-visible) { box-shadow: none; outline: none; } -.user-links button:focus { - box-shadow: rgb(102, 132, 72) 0 0 3px; +.interface-button:focus { + box-shadow: #668448 0 0 3px; outline: none; } -.user-links button:disabled { - border-color: rgba(27, 31, 35, 0.1); - color: rgba(255, 255, 255, 0.8); +.interface-button:disabled { + border-color: #1b1f231a; + color: #ffffffcc; cursor: default; } -.user-links button:active { - background-color: rgb(102, 132, 72); - box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset; +.interface-button:active { + background-color: #668448; + box-shadow: #14462033 0 1px 0 inset; } .fade-out { diff --git a/source/index.html b/source/index.html index 4fa1cd8..b25d270 100644 --- a/source/index.html +++ b/source/index.html @@ -1,6 +1,5 @@ - @@ -8,7 +7,6 @@ Go Go Grocery! -
@@ -29,10 +27,8 @@

Go Go Grocery

-

-
@@ -40,33 +36,31 @@

Go Go Grocery

Start Comparing Today!

Shop Smart, Save Smart!

- +
- - - - + + + +
- - - - + + + +
-

Who Are We?

-

Save The ultimate destination for comparing prices on groceries and other daily essentials. We’ll make it easy for you to find the best deals and save money on your everyday purchases. Whether it’s fresh produce, household items, or pantry staples, our platform provides real-time price comparisons from your favorite grocery stores. Join our community and make every dollar count today!

-

Share Once you’ve created your grocery list, we make it easy for you to share your list to others through SMS, email, or social media. All to make your eventual trip to the grocery store all the more worth it!

-

Strength Healthy wallet, healthy mind! We’ve integrated nutritional facts for users to be more conscientious of their choices while shopping.

+

Save. The ultimate destination for comparing prices on groceries and other daily essentials. We’ll make it easy for you to find the best deals and save money on your everyday purchases. Whether it’s fresh produce, household items, or pantry staples, our platform provides real-time price comparisons from your favorite grocery stores. Join our community and make every dollar count today!

+

Share. Once you’ve created your grocery list, we make it easy for you to share your list to others through SMS, email, or social media. All to make your eventual trip to the grocery store all the more worth it!

+

Strength. Healthy wallet, healthy mind! We’ve integrated nutritional facts for users to be more conscientious of their choices while shopping.

-
diff --git a/source/user-page.html b/source/user-page.html index e9bf771..c638697 100644 --- a/source/user-page.html +++ b/source/user-page.html @@ -10,7 +10,7 @@ Go Go Grocery! - +

Go Go Grocery

From 81b0a68e58aea4540b0cd6fad267665b5722238c Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Mon, 16 Sep 2024 01:11:06 -0700 Subject: [PATCH 2/5] Finished make-list webpage! --- source/css/index.css | 2 +- source/css/main.css | 5 +- source/css/make-list.css | 105 ++++++++++++++++++++------------------- source/js/make-list.js | 2 +- source/make-list.html | 3 +- source/user-page.html | 2 + 6 files changed, 65 insertions(+), 54 deletions(-) diff --git a/source/css/index.css b/source/css/index.css index 8b1f9b0..f801626 100644 --- a/source/css/index.css +++ b/source/css/index.css @@ -2,7 +2,7 @@ background-color: #fe9920cc; padding: 1em; font-size: 200%; - padding-left: 30px; + padding-left: 1em; } .header-container p { diff --git a/source/css/main.css b/source/css/main.css index 64fea5e..ca5aff2 100644 --- a/source/css/main.css +++ b/source/css/main.css @@ -30,9 +30,12 @@ body { background-size: cover; } + +/* Padding for the body has been removed, make note of this */ body { background-color: #f8f2e1; - padding: 100px 0px 50px; + padding: 5em 0 0 0; + /* padding: 100px 0px 50px; */ /* 100px top to give space for sticky header can be adjusted as needed, 0px on side to allow header to occupy full screen 50px on bottom because I felt like it */ margin: 0px; /* There's a margin between html and body? */ diff --git a/source/css/make-list.css b/source/css/make-list.css index f23b2aa..c52ea4c 100644 --- a/source/css/make-list.css +++ b/source/css/make-list.css @@ -1,31 +1,10 @@ - -/*Formatting for the text area*/ -/*#grocery-header{ - background: #FC9E5F; - border-radius: 10px; - - padding: 9px; - - color:rgb(128, 57, 9); - - margin: 10px; -} - -/*Changing the color of the text inside the text area -::placeholder{ - color:rgb(128, 57, 9); - font-size: 110%; - font-weight: bold; -}*/ - .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 */ + padding: 0 2em; } - .list-name{ margin:0; } @@ -34,23 +13,20 @@ .next-page-buttons{ background: #7C9E57; border-radius: 30px; - padding:10px; margin:10px; - - font-size: 110%; + /* font-size: 5em; */ font-weight: bold; - display:flex; gap:10px; - } +/* Proposed change: Removing the opacity animation */ /*Changing cursor visuals + opacity of 'add item' and 'finished with your list' buttons */ -.next-page-buttons:hover{ +/* .next-page-buttons:hover{ cursor:pointer; opacity: 80%; -} +} */ #editListBtn { background-color: transparent; /* Dark Blue */ @@ -68,7 +44,7 @@ text-align: center; text-decoration: none; /* display: inline-block; */ - font-size: 15px; + font-size: 1.5em; border-radius: 12px; font-weight: bold; cursor: pointer; @@ -76,39 +52,67 @@ } .menuBTN:hover { - background-color: #4f6834; /* Darker Green */ -} + background-color: #719150; + opacity: 70%; + } + + .menuBTN:focus:not(:focus-visible):not(.focus-visible) { + box-shadow: none; + outline: none; + } + + .menuBTN:focus { + box-shadow: #668448 0 0 3px; + outline: none; + } + + .menuBTN:disabled { + border-color: #1b1f231a; + color: #ffffffcc; + cursor: default; + } + + .menuBTN:active { + background-color: #668448; + box-shadow: #14462033 0 1px 0 inset; + } /*formatting for the entirety of the 3-column display*/ .information-holder{ display:grid; grid-template-columns: 1fr 1fr 1fr; - - background-color: rgb(225, 228, 207); - - border-radius: 10px; - - margin: 10px; + background-color: #EFF0E5; + border-radius: 2em; + border: none; + margin: 0em 2em; } /*Including border between each column to determine placement - can take out if wanted*/ .column1, .column2, .column3{ - border-style: solid; - border-color: rgb(213, 215, 200); - border-radius: 10px; + border: 0.4em solid #d5d7c8; } /*Adjusting font weight/size of the list of items within 1st column*/ .column1{ + border-top-left-radius: 2em; + border-bottom-left-radius: 2em; #item-list{ font-weight: bold; font-size: 150% } + + .groceryItem { + width: auto; + padding: 0; + margin: 1.25em; + padding: 0.15em; + } } /*Overall formatting for 2nd column*/ .column2{ - + border-left: none; + border-right: none; /*Aligning the Name and Main Image to be in the center of the column*/ .align-images-center{ display: grid; @@ -126,7 +130,7 @@ } h2{ - margin: 10px; + margin: 10px 0 10px 10px; font-size: 175%; } @@ -134,7 +138,8 @@ /*Formatting for the 3rd Column*/ .column3{ - + border-top-right-radius: 2em; + border-bottom-right-radius: 2em; /*Adjusting display of 'description' and 'nutrition facts' buttons*/ .fact-buttons{ display: flex; @@ -157,7 +162,6 @@ #description-button{ border-top-left-radius: 20px; border-bottom-left-radius: 20px; - background-color: rgb(173, 175, 161); /*keep this way so that when page loads, it looks like description button is automatically selected.*/ } @@ -185,18 +189,14 @@ /*Formatting for the image slider in 2nd column*/ .image-holder{ display: flex; - overflow:scroll; width:auto; height:auto; border:1px solid rgb(241, 243, 227); - margin:10px; + margin:10px 0 10px 10px; background-color: rgb(241, 243, 227); - border-radius: 10px; - scroll-snap-type: x mandatory; - /*Makes sure all images inside slider have rounded border + equal space between each item*/ img{ border-radius: 10px; @@ -258,4 +258,9 @@ background: transparent; color: #69563b; +} + +.extra-images { + padding: 0 0.5em; + border: 0.2em solid #00000033; } \ No newline at end of file diff --git a/source/js/make-list.js b/source/js/make-list.js index f1f5e8d..1285fa9 100644 --- a/source/js/make-list.js +++ b/source/js/make-list.js @@ -55,7 +55,7 @@ function init(){ document.getElementById('listHeading').addEventListener('keydown', (event) => { if(event.key === 'Enter'){ document.getElementById('listHeading').contentEditable = false; - document.getElementById('listHeading').style.backgroundColor = '#f8f2e1'; + document.getElementById('listHeading').style.backgroundColor = '#FFFFFF'; } }); diff --git a/source/make-list.html b/source/make-list.html index f0171b2..bd5c3d3 100644 --- a/source/make-list.html +++ b/source/make-list.html @@ -30,7 +30,8 @@

Go Go Grocery

- +
+
diff --git a/source/user-page.html b/source/user-page.html index c638697..560c28a 100644 --- a/source/user-page.html +++ b/source/user-page.html @@ -29,6 +29,8 @@

Go Go Grocery

+
+
From 80a8151dbf80343c391b95b04a602d372a672e2d Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Mon, 16 Sep 2024 01:41:42 -0700 Subject: [PATCH 3/5] Finished receipt.html! --- source/css/index.css | 5 +++-- source/css/make-list.css | 7 +++++-- source/css/receipt.css | 4 ++-- source/make-list.html | 12 +++++------- source/receipt.html | 29 ++++++++++++++++++++--------- 5 files changed, 35 insertions(+), 22 deletions(-) diff --git a/source/css/index.css b/source/css/index.css index f801626..40d42e1 100644 --- a/source/css/index.css +++ b/source/css/index.css @@ -63,12 +63,13 @@ .info-splurge h2 { font-size: 2.5em; padding: 0; - margin-bottom: 0; + margin-bottom: 0.5em; } .info-splurge p { - font-size: 1.75em; + font-size: 1.5em; margin-top: 0; + font-weight: 400; } .header-links { diff --git a/source/css/make-list.css b/source/css/make-list.css index c52ea4c..0d99e12 100644 --- a/source/css/make-list.css +++ b/source/css/make-list.css @@ -31,12 +31,15 @@ #editListBtn { background-color: transparent; /* Dark Blue */ border: none; - font-size: large; - + font-size: 0.75em; font-weight: bold; cursor: pointer; } +#listHeading { + font-size: 1.1em; +} + .menuBTN { background-color: #7c9e57; /* Green */ border: none; diff --git a/source/css/receipt.css b/source/css/receipt.css index 35bc964..7cd5c25 100644 --- a/source/css/receipt.css +++ b/source/css/receipt.css @@ -1,5 +1,5 @@ .display { - background-color: #f3e9ce; + background-color: #EFF0E5; display: flex; flex-direction: row; justify-content: flex-start; @@ -7,7 +7,7 @@ overflow-y: auto; border-radius: 1em; padding: 1.5em 1.25em; - margin: 1em 2em; + margin: 0 2em; height: auto; } diff --git a/source/make-list.html b/source/make-list.html index bd5c3d3..b53b72f 100644 --- a/source/make-list.html +++ b/source/make-list.html @@ -40,18 +40,16 @@

Go Go Grocery

-

- Current List Name - -

- - +
+

+ Current List Name + +

-
diff --git a/source/receipt.html b/source/receipt.html index 411ce33..fee360a 100644 --- a/source/receipt.html +++ b/source/receipt.html @@ -11,21 +11,32 @@
- placeholder icon +

Go Go Grocery

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

Username's Day Grocery Run

- +

+ Current List Name +

Created Month, Day Year

From 0db8e4fccdfd69e51384a2c3ae3f70ced08ceb92 Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Tue, 17 Sep 2024 01:36:57 -0700 Subject: [PATCH 4/5] progress on compare-stores --- source/compare-stores.html | 3 +- source/css/compare-stores.css | 303 ++++++++++++++++++++-------------- source/css/make-list.css | 2 +- source/js/compare-stores.js | 271 +++++++++++++++++++----------- source/js/make-list.js | 9 - 5 files changed, 357 insertions(+), 231 deletions(-) diff --git a/source/compare-stores.html b/source/compare-stores.html index c9c76f4..038a9e8 100644 --- a/source/compare-stores.html +++ b/source/compare-stores.html @@ -30,7 +30,8 @@

Go Go Grocery

- +
+

diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css index e46c79f..ce48e99 100644 --- a/source/css/compare-stores.css +++ b/source/css/compare-stores.css @@ -1,189 +1,248 @@ -/* .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 */ + 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: 0 2em; } .list-name { - margin: 0; /* Removes default margin to align properly */ + margin: 0; /* Removes default margin to align properly */ } .title-child-right { - display: flex; - gap: 10px; /* Adds space between the buttons */ + display: flex; + gap: 10px; /* Adds space between the buttons */ } +#listHeading { + font-size: 1.1em; +} -/* .title{ - display: flex; - justify-content: flex-end; /* Aligns the buttons to the right */ - /* gap: 10px; Adds space between the buttons */ +.title-child-right button:hover { + background-color: #719150; + opacity: 70%; +} -/* } */ +.title-child-right button:focus:not(:focus-visible):not(.focus-visible) { + box-shadow: none; + outline: none; +} +.title-child-right button:focus { + box-shadow: #668448 0 0 3px; + outline: none; +} + +.title-child-right button:disabled { + border-color: #1b1f231a; + color: #ffffffcc; + cursor: default; +} + +.title-child-right button:active { + background-color: #668448; + box-shadow: #14462033 0 1px 0 inset; +} .stores-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; - padding: 10px; - } + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin: 0em 2em; +} #editListBtn { - background-color: transparent; /* Dark Blue */ - border: none; - font-size: large; - - font-weight: bold; - cursor: pointer; + background-color: transparent; /* Dark Blue */ + border: none; + font-size: 0.75em; + font-weight: bold; + cursor: pointer; } -.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; - cursor: pointer; - /* float: right; */ +.next-page-buttons { + background: #7c9e57; + border-radius: 30px; + padding: 10px; + margin: 10px; + font-weight: bold; + display: flex; + gap: 10px; } -.menuBTN:hover { - background-color: #4f6834; /* Darker Green */ +.menuBTN { + background: #7c9e57; /* Green */ + border-radius: 30px; + border: none; + padding: 0.75em 3.5em; + margin: 0; + text-align: center; + text-decoration: none; + font-size: 1.5em; + font-weight: bold; + cursor: pointer; } .store { - background-color: transparent; - /* padding: 15px; */ - /* border-radius: 10px; */ - text-align: center; - position: relative; - display: flex; - flex-direction: column; - /* align-items: center; */ - + background-color: transparent; + text-align: center; + position: relative; + display: flex; + flex-direction: column; } .storeTitleBar { - 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 */ + background-color: #f8f9fa; + padding: 1em; + border-radius: 2em; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + 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 */ } .storeTitleBar img { - width: 50px; - height: 50px; - /* margin-bottom: 10px; */ - border-radius: 50%; + 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: 24px; - /* margin-bottom: 10px; */ - font-weight: bold; + color: black; + border: none; + padding: 0.5rem 1rem; + border-radius: 1em; + cursor: pointer; + font-size: 24px; + font-weight: bold; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +select { + appearance: none; + background-color: transparent; + border: none; + padding: 0 1em 0 0; + margin: 0; + width: 100%; + font-family: inherit; + font-size: inherit; + cursor: inherit; + line-height: inherit; + outline: none; } .store-title:hover { - background-color: #4e4c82; + background-color: #4e4c82; } .store-dropdown { - margin-top: 10px; + background-color: white; + margin-top: 2em; + border: 1px solid #000000; + border-radius: 0.25em; + /* padding: 0.6em 1em 0 0.3em; */ + font-size: 1em; + cursor: pointer; + display: grid; + /* grid-template-areas: "select"; */ + /* align-items: center; */ +} + +store-dropdown, +.store-dropdown:after { + grid-area: select; +} + +.store-dropdown::after { + content: ""; + width: 0.8em; + height: 0.5em; + background-color: #777; + clip-path: polygon(100% 0%, 0 0%, 50% 100%); + grid-area: ; 2 } .store-select { - padding: 5px; - border-radius: 5px; - border: 1px solid #ccc; + padding: 0; + /* background-color: #FFF; */ + /* border: 2em solid #000000; + border-radius: 0.25em; + padding: 0.25em 0.5em; + border: none; */ } .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; + position: absolute; + top: 10px; + right: 10px; + 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; + background-color: darkred; } - .storeItems { - margin-top: 10px; - padding: 10px; - background-color: #ffffff; - border-radius: 10px; - max-height:315px; - min-height:315px; - overflow-y:scroll; - + margin: 0em; + padding: 0 1em 5em 1em; + 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; + display: flex; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid #ddd; } .item:last-child { - border-bottom: none; + border-bottom: none; } .item-name { - font-weight: bold; - font-size:larger; + font-weight: bold; + font-size: larger; } .item-price { - color: #2f2f2f; + 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, +.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; +.subtotal-price, +.total-price { + color: #ffffff; } - diff --git a/source/css/make-list.css b/source/css/make-list.css index 0d99e12..ee37b6f 100644 --- a/source/css/make-list.css +++ b/source/css/make-list.css @@ -14,7 +14,7 @@ background: #7C9E57; border-radius: 30px; padding:10px; - margin:10px; + margin:10px 0; /* font-size: 5em; */ font-weight: bold; display:flex; diff --git a/source/js/compare-stores.js b/source/js/compare-stores.js index a771db0..38b2f43 100644 --- a/source/js/compare-stores.js +++ b/source/js/compare-stores.js @@ -1,19 +1,69 @@ -// const costcoColor = '#71677c'; -// const walmartColor = '#945d5e'; -// const targetColor = '#8de969'; -// const ralphsColor = '#337357'; - -document.getElementById('addStoreBtn').addEventListener('click', function() { - // var stores = document.getElementById('gridContainer').children; - 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)`; - - const newItem = document.createElement('div'); - newItem.className = 'store'; - newItem.innerHTML = ` +const colorPalette = [ + "#3A75A8", + "#3795D1", + "#6E7BB9", + "#7F9278", + "#8FCFA9", + "#A2E4D4", + "#E5D78C", + "#FFBCA5", + "#67614C", + "#E89ABF", + "#D891B0", + "#8C80BC", + "#FFA8A6", + "#6B5365", + "#79E9C8", + "#F6D768", + "#A8DC68", + "#A6EBA2", + "#525BA3", + "#7EA5D7", + "#AEC2E6", + "#B2C9A9", + "#C6D1C4", + "#B2A680", + "#D1B880", + "#E8A9B8", + "#B9A4C9", + "#A496A1", + "#D9CEC7", + "#F0E6A4", + "#CDD9A6", + "#AACFDD", + "#BFD0D9", + "#90A295", + "#7F9482", + "#A89D8F", + "#C8A69D", + "#D9A880", + "#E0D7CA", + "#F2B495", + "#D2C299", + "#E8D9B6", + "#B0C8BA", + "#6F7F91", + "#A6A3C4", + "#DAB3E0", + "#D5E8D4", + "#B0A79E", + "#E1BFB2", + "#F3DBC7", +]; + +document.getElementById("addStoreBtn").addEventListener("click", function () { + // var stores = document.getElementById('gridContainer').children; + 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)`; + + const newItem = document.createElement("div"); + newItem.className = "store"; + newItem.innerHTML = `
Walmart Logo @@ -74,109 +124,134 @@ document.getElementById('addStoreBtn').addEventListener('click', function() { $8.47
`; - 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'); - newSelect.addEventListener('change', function() { - updateStore(newSelect); - }); - - } else { - alert('You have reached the max amount of store comparisons!'); - } - - + // newItem.getElementsByClassName("storeTitleBar")[0].style.backgroundColor = + // "#" + Math.floor(Math.random() * 16777215).toString(16); + // calculateSubtotal(newItem); + // calculateTotal(newItem); + const color = colorPalette[Math.floor(Math.random() * colorPalette.length)]; + newItem.getElementsByClassName("store-title")[0].style.backgroundColor = color; + newItem.getElementsByClassName("storeTitleBar")[0].style.backgroundColor = color; + // 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 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"); + const color = colorPalette[Math.floor(Math.random() * colorPalette.length)]; + // Change the title to the selected store + storeTitle.textContent = + selectedValue.charAt(0).toUpperCase() + selectedValue.slice(1); -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.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.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; + // Change the image based on selection + 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.getElementsByClassName("storeTitleBar")[0].style.backgroundColor = + color; + store.getElementsByClassName("store-title")[0].style.backgroundColor = color; + // store.getElementsByClassName("storeTitleBar")[0].style.backgroundColor = + // "#" + Math.floor(Math.random() * 16777215).toString(16); } -document.querySelectorAll('.store-select').forEach(select => { - select.addEventListener('change', function() { - updateStore(select); - }); - +document.querySelectorAll(".store-select").forEach((select) => { + select.addEventListener("change", function () { + updateStore(select); + }); }); +document + .getElementById("gridContainer") + .addEventListener("click", function (e) { + 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; -document.getElementById('gridContainer').addEventListener('click', function(e) { - 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 left after deletion - store.remove(); - gridContainer.style.gridTemplateColumns = `repeat(${columnCount - 1}, 1fr)`; - } else { - alert('You must have at least one 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!"); + } } -}); - + }); function calculateSubtotal(storeElement) { - const items = storeElement.querySelectorAll('.item-price'); - let subtotal = 0; + const items = storeElement.querySelectorAll(".item-price"); + let subtotal = 0; - items.forEach(item => { - subtotal += parseFloat(item.textContent.replace('$', '')); - }); + items.forEach((item) => { + subtotal += parseFloat(item.textContent.replace("$", "")); + }); - storeElement.querySelector('.subtotal-price').textContent = `$${subtotal.toFixed(2)}`; + 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; + 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)}`; + 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.querySelectorAll(".store").forEach((store) => { + calculateSubtotal(store); + calculateTotal(store); + const color = colorPalette[Math.floor(Math.random() * colorPalette.length)]; + store.getElementsByClassName("store-title")[0].style.backgroundColor = color; + store.getElementsByClassName("storeTitleBar")[0].style.backgroundColor = color; + // 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("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 +document.getElementById("addItemBtn").addEventListener("click", function () { + window.location.href = "item-price.html"; +}); + +window.addEventListener("load", () => init()); + +function init() { + document.getElementById("editListBtn").addEventListener("click", function () { + document.getElementById("listHeading").contentEditable = true; + document.getElementById("listHeading").style.backgroundColor = "#e8e3d2"; + }); + + document + .getElementById("listHeading") + .addEventListener("keydown", (event) => { + if (event.key === "Enter") { + document.getElementById("listHeading").contentEditable = false; + document.getElementById("listHeading").style.backgroundColor = + "#FFFFFF"; + } + }); +} diff --git a/source/js/make-list.js b/source/js/make-list.js index 1285fa9..905bba1 100644 --- a/source/js/make-list.js +++ b/source/js/make-list.js @@ -10,8 +10,6 @@ window.addEventListener("load", () => init()); -//export let grocery_lists = []; - /** * Initializes the page */ @@ -39,13 +37,6 @@ function init(){ item.addEventListener("click", () => displayGroceryInformation(item, item_name)); }); - //document.write(grocery_lists[0].textContent); - - - /*const grocery_item = document.getElementById("groceryItem"); - - grocery_item.addEventListener("click", () => displayGroceryInformation(grocery_item, item_name));*/ - document.getElementById('editListBtn').addEventListener('click', function() { document.getElementById('listHeading').contentEditable = true; document.getElementById('listHeading').style.backgroundColor = '#e8e3d2'; From 7f7e94db5d2df50dcbebf937f3ca565516b90c6b Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Tue, 17 Sep 2024 18:45:30 -0700 Subject: [PATCH 5/5] Finished compare-stores.html --- source/css/compare-stores.css | 24 ++++++++++++++---------- source/css/make-list.css | 3 +-- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/source/css/compare-stores.css b/source/css/compare-stores.css index ce48e99..1f1e7a9 100644 --- a/source/css/compare-stores.css +++ b/source/css/compare-stores.css @@ -80,6 +80,7 @@ font-size: 1.5em; font-weight: bold; cursor: pointer; + white-space: nowrap; } .store { @@ -106,7 +107,6 @@ .storeTitleBar img { width: 50px; height: 50px; - /* margin-bottom: 10px; */ border-radius: 50%; } @@ -146,13 +146,15 @@ select { .store-dropdown { background-color: white; - margin-top: 2em; + margin: 2.5em 0 0 0; border: 1px solid #000000; border-radius: 0.25em; - /* padding: 0.6em 1em 0 0.3em; */ + padding: 0 0 0 0.25em; font-size: 1em; cursor: pointer; - display: grid; + display: flex; + flex-direction: row; + width: 6rem; /* grid-template-areas: "select"; */ /* align-items: center; */ } @@ -166,9 +168,10 @@ store-dropdown, content: ""; width: 0.8em; height: 0.5em; + padding: 0; + margin: 0.5em 0.25em; background-color: #777; clip-path: polygon(100% 0%, 0 0%, 50% 100%); - grid-area: ; 2 } .store-select { @@ -197,7 +200,8 @@ store-dropdown, } .delete-store-btn:hover { - background-color: darkred; + background-color: rgba(139, 0, 0, 0.5); + } .storeItems { @@ -205,8 +209,8 @@ store-dropdown, padding: 0 1em 5em 1em; background-color: #ffffff; border-radius: 10px; - max-height: 315px; - min-height: 315px; + max-height: 52.5vh; + min-height: 52.5vh; overflow-y: scroll; } @@ -236,7 +240,7 @@ store-dropdown, justify-content: space-between; padding: 10px; margin-top: 10px; - background-color: #272d32; + background-color: rgba(56, 64, 71, 0.85); border-radius: 10px; font-weight: bold; font-size: 16px; @@ -244,5 +248,5 @@ store-dropdown, .subtotal-price, .total-price { - color: #ffffff; + color: #fbf7f5; } diff --git a/source/css/make-list.css b/source/css/make-list.css index ee37b6f..8a631bc 100644 --- a/source/css/make-list.css +++ b/source/css/make-list.css @@ -55,8 +55,7 @@ } .menuBTN:hover { - background-color: #719150; - opacity: 70%; + background-color: rgba(113, 145, 80, 0.75); } .menuBTN:focus:not(:focus-visible):not(.focus-visible) {