updated user-page.html + make-list.html (including make-list.js and m…

…ake-list.css) + index.html & main.css to include home button functionality.

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%;
     }
 }
 

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,29 +50,37 @@
     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;
         font-size: 125%
     }    
 }
 
-
-
+/*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;
         padding-bottom: 10px;
 
         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,36 +110,89 @@
             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{
             border-top-right-radius: 20px;
             border-bottom-right-radius: 20px;
         }
 
+        button:hover{
+            cursor: pointer;
+            opacity: 80%;
+        }
+
 
     }
 
-    #nutrition-facts{
+    #displayed-text{
         margin: 10px;
 
         font-size: 110%;
     }
 
 }
 
+/*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;
+}
+

source/index.html

@@ -10,8 +10,9 @@
     </head>
 
     <body>
+        <!--Formatting for the header - CONSISTENT ACROSS HTML FILES-->
         <header>
-            <img src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E">
+            <img id="home-button-logo" src="./assets/images/final-icon1.png" alt="placeholder icon" width="70" height="70" title="&#x1F60E" onclick="location.href='./index.html';">
             <h1>Go Go Grocery</h1>
             <div class="header-links">
                 <div class="icon+link">
@@ -31,6 +32,8 @@ <h1>Go Go Grocery</h1>
 
         <br>
         <br>
+
+        <!--Holds orange segment of webpage with logos and sign-up button-->
         <main class="info">
             <section class="sign-up">
                 <div class="grid">
@@ -56,6 +59,7 @@ <h1>Start Comparing Today!</h1>
                 </div>
             </section>
 
+            <!--Website's Info-->
             <section class="info-splurge">
                 <h2>Who Are We?</h2>
                 <p> <b>Save</b> 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!</p>

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)';
+}