From 6ea733dfa2d10b1e4ed1fffafaa06e3dab73f10f Mon Sep 17 00:00:00 2001 From: tirani427 Date: Sat, 10 Aug 2024 00:30:59 -0700 Subject: [PATCH] updated user-page.html + make-list.html (including make-list.js and make-list.css) + index.html & main.css to include home button functionality. --- source/css/main.css | 17 +---- source/css/make-list.css | 130 +++++++++++++++++++++++++++------------ source/index.html | 6 +- source/js/make-list.js | 63 +++++++++++++++++++ source/make-list.html | 31 ++++++---- source/user-page.html | 2 +- 6 files changed, 181 insertions(+), 68 deletions(-) create mode 100644 source/js/make-list.js diff --git a/source/css/main.css b/source/css/main.css index d25e7e8..da0b501 100644 --- a/source/css/main.css +++ b/source/css/main.css @@ -54,20 +54,9 @@ header { padding-left: 100px; } - /* This handles the class of "back" buttons in the headers. Home button on project.html and back button on notes.html */ - .back { - &>i { - font-size: 2em; - font-weight: 700; - letter-spacing: 5px; - margin: 3px; - margin-left: 8px; - color: white; - } - - &:hover { - opacity: 60%; - } + #home-button-logo:hover{ + cursor:pointer; + opacity: 80%; } } diff --git a/source/css/make-list.css b/source/css/make-list.css index f66de1e..f801625 100644 --- a/source/css/make-list.css +++ b/source/css/make-list.css @@ -1,4 +1,5 @@ +/*Formatting for the text area*/ #grocery-header{ background: #FC9E5F; border-radius: 10px; @@ -9,13 +10,16 @@ margin: 10px; } + +/*Changing the color of the text inside the text area*/ ::placeholder{ color:rgb(128, 57, 9); font-size: 110%; font-weight: bold; } -#next-page-buttons{ +/*Formatting of the 'Add Item' and 'Finished with your list' buttons*/ +.next-page-buttons{ background: #7C9E57; border-radius: 10px; @@ -26,9 +30,15 @@ font-weight: bold; justify-content: left; +} +/*Changing cursor visuals + opacity of 'add item' and 'finished with your list' buttons */ +.next-page-buttons:hover{ + cursor:pointer; + opacity: 80%; } +/*formatting for the entirety of the 3-column display*/ .information-holder{ display:grid; grid-template-columns: 1fr 1fr 1fr; @@ -40,12 +50,14 @@ margin: 10px; } +/*Including border between each column to determine placement - can take out if wanted*/ .column1, .column2, .column3{ border-style: solid; - border-color: rgb(252, 255, 232); + border-color: rgb(213, 215, 200); border-radius: 10px; } +/*Adjusting font weight/size of the list of items within 1st column*/ .column1{ #item-list{ font-weight: bold; @@ -53,9 +65,10 @@ } } - - +/*Overall formatting for 2nd column*/ .column2{ + + /*Aligning the Name and Main Image to be in the center of the column*/ .align-images-center{ display: grid; justify-content: center; @@ -63,6 +76,11 @@ img{ border-radius: 10px; + + width:50%; + height:auto; + + justify-self: center; } } @@ -71,35 +89,12 @@ font-size: 150%; } - .image-holder{ - display: flex; - flex-direction: row; - justify-content: center; - - button{ - border-radius: 10px; - width:35px; - background-color: rgb(12,71,103, 0.60); - - font-size: 250%; - - &:hover{ - cursor: pointer; - opacity: 80%; - } - - } - - img{ - border-radius: 10px; - margin: 10px; - } - - } - } +/*Formatting for the 3rd Column*/ .column3{ + + /*Adjusting display of 'description' and 'nutrition facts' buttons*/ .fact-buttons{ display: flex; justify-content: center; @@ -115,21 +110,14 @@ font-weight: bold; padding: 10px; - - &:hover{ - cursor: pointer; - opacity: 80%; - - } - - &:active{ - background-color: rgb(173, 175, 161); - } + } #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.*/ } #nutrition-button{ @@ -137,10 +125,15 @@ border-bottom-right-radius: 20px; } + button:hover{ + cursor: pointer; + opacity: 80%; + } + } - #nutrition-facts{ + #displayed-text{ margin: 10px; font-size: 110%; @@ -148,3 +141,58 @@ } +/*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; + 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; + margin: 10px; + } +} + +/*Formatting for permanent scroller (1/4)*/ +.image-holder::-webkit-scrollbar{ + width:10px; + scrollbar-width: thin; +} + +/*Formatting for permanent scroller (2/4)*/ +.image-holder::-webkit-scrollbar-track{ + background-color:#f1f1f1; +} + +/*Formatting for permanent scroller (3/4)*/ +.image-holder::-webkit-scrollbar-thumb{ + background-color: #bec7b6; +} + +/*Formatting for permanent scroller (4/4)*/ +.image-holder::-webkit-scrollbar-thumb:hover{ + background-color: #3f7c4a; +} + +/*Making sure the images disappear once they "overflow"/are scrolled past + format of the actual image sizes*/ +.image-holder > img{ + display: flex; + + flex-shrink: 0; + width:20%; + height:auto; + + scroll-snap-align:auto; + scroll-behavior:auto; +} + diff --git a/source/index.html b/source/index.html index 517ab75..4fa1cd8 100644 --- a/source/index.html +++ b/source/index.html @@ -10,8 +10,9 @@ +
- placeholder icon +

Go Go Grocery

@@ -31,6 +32,8 @@

Go Go Grocery



+ +
+

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!

diff --git a/source/js/make-list.js b/source/js/make-list.js new file mode 100644 index 0000000..a2d3395 --- /dev/null +++ b/source/js/make-list.js @@ -0,0 +1,63 @@ +/** + * @file + * This file handles functionality for the make-list page including: + * - Loading current list items + * - Searching for list names in localStorage + * - Displaying images for currently selected item + * - Loading a description for currently selected item + * - Loading nutrition facts for currently selected item + */ + +window.addEventListener("load", () => init()); + +//export let grocery_lists = []; + +/** + * Initializes the page + */ +function init(){ + + const current_list = document.getElementById("item-list"); //use later when we have multiple lists. + + //get text displayed in 3rd column + const displayed_text = document.getElementById("displayed-text"); + + //button to change text displayed to description of item + const description_button = document.getElementById("description-button"); + description_button.addEventListener("click", () => change_to_description(description_button, nutrition_button, displayed_text)); + + //button to change text displayed to item's nutrition facts + const nutrition_button = document.getElementById("nutrition-button"); + nutrition_button.addEventListener("click", () => change_to_nutrition(nutrition_button, description_button, displayed_text)); + + +} + +/** + * Changing displayed text to nutrition facts + * @param {*} nutrition_button to change background color to 'selected' value + * @param {*} description_button to change background color to 'deselected' value + * @param {*} displayed_text text to change. + */ +function change_to_nutrition(nutrition_button, description_button, displayed_text){ + displayed_text.innerHTML = "Nutrition Text"; + + nutrition_button.style.backgroundColor = 'rgb(173, 175, 161)'; + + description_button.style.backgroundColor = 'rgb(206, 208, 192)'; + +} + +/** + * Change displayed text to description of item + * @param {*} description_button to change background color to 'selected' value + * @param {*} nutrition_button to change background color to 'deselected' value + * @param {*} displayed_text text to change. + */ +function change_to_description(description_button, nutrition_button, displayed_text){ + displayed_text.innerHTML = "Description Text"; + + description_button.style.backgroundColor = 'rgb(173, 175, 161)'; + + nutrition_button.style.backgroundColor = 'rgb(206, 208, 192)'; +} diff --git a/source/make-list.html b/source/make-list.html index ec44330..3688109 100644 --- a/source/make-list.html +++ b/source/make-list.html @@ -6,12 +6,13 @@ + Go Go Grocery!
- placeholder icon +

Go Go Grocery

@@ -29,48 +30,56 @@

Go Go Grocery

- - - + + + + + +
-
+
+
    hello
+

Name

-

Main Image Holder

-

Extra Image Holder

+ +
- - + + +
+
-

Nutritional Facts

+

Description Text

- + +
diff --git a/source/user-page.html b/source/user-page.html index 1f8ed58..4440b71 100644 --- a/source/user-page.html +++ b/source/user-page.html @@ -12,7 +12,7 @@
- placeholder icon +

Go Go Grocery