Merge branch 'user-page' of https://github.com/acmucsd-projects/su24a…

…-hack-team-2 into user-page

source/css/make-list.css

@@ -1,6 +1,6 @@
 
 /*Formatting for the text area*/
-#grocery-header{
+/*#grocery-header{
     background: #FC9E5F;    
     border-radius: 10px;
 
@@ -11,25 +11,39 @@
     margin: 10px;
 }
 
-/*Changing the color of the text inside the text area*/
+/*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 */
+}
+
+
+.list-name{
+    margin:0;
 }
 
 /*Formatting of the 'Add Item' and 'Finished with your list' buttons*/
 .next-page-buttons{
     background: #7C9E57;
-    border-radius: 10px;
+    border-radius: 30px;
 
     padding:10px;
     margin:10px;
 
     font-size: 110%;
     font-weight: bold;
 
-    justify-content: left;
+    display:flex;
+    gap:10px;
+
 }
 
 /*Changing cursor visuals + opacity of 'add item' and 'finished with your list' buttons */
@@ -38,6 +52,33 @@
     opacity: 80%;
 }
 
+#editListBtn {
+    background-color: transparent; /* Dark Blue */
+    border: none;
+    font-size: large;
+
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.menuBTN {
+    background-color: #7c9e57; /* Green */
+    border: none;
+    padding: 5px 18px;
+    text-align: center;
+    text-decoration: none;
+    /* display: inline-block; */
+    font-size: 15px;
+    border-radius: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    /* float: right; */
+}
+
+.menuBTN:hover {
+    background-color: #4f6834; /* Darker Green */
+}
+
 /*formatting for the entirety of the 3-column display*/
 .information-holder{
     display:grid;
@@ -61,7 +102,7 @@
 .column1{
     #item-list{
         font-weight: bold;
-        font-size: 125%
+        font-size: 150%
     }    
 }
 
@@ -86,7 +127,7 @@
 
     h2{
         margin: 10px;
-        font-size: 150%;
+        font-size: 175%;
     }
 
 }
@@ -196,3 +237,25 @@
     scroll-behavior:auto;
 }
 
+.extra-images:hover{
+    cursor:pointer;
+}
+
+.image-holder img{
+    transition: 1s ease;
+}
+
+.image-holder img:hover{
+    -webkit-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2);
+    transition: 1s ease;
+}
+
+
+.groceryItem:hover{
+    cursor:pointer;
+
+    background: transparent;
+    color: #69563b;
+}

source/js/make-list.js

@@ -19,6 +19,10 @@ function init(){
 
     const current_list = document.getElementById("item-list"); //use later when we have multiple lists.
 
+    const item_name = document.getElementById("item-name");
+
+    const item_main_image = document.getElementById("main-image");
+
     //get text displayed in 3rd column
     const displayed_text = document.getElementById("displayed-text");
 
@@ -31,6 +35,36 @@ function init(){
     nutrition_button.addEventListener("click", () => change_to_nutrition(nutrition_button, description_button, displayed_text));
 
 
+    document.querySelectorAll(".groceryItem").forEach(function(item){
+        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';
+    });
+
+
+    document.getElementById('listHeading').addEventListener('keydown', (event) => {
+        if(event.key === 'Enter'){
+            document.getElementById('listHeading').contentEditable = false;
+            document.getElementById('listHeading').style.backgroundColor = '#f8f2e1';
+        }
+    });
+
+
+    document.querySelectorAll('.extra-images').forEach(function(image){
+        image.addEventListener("click", () => change_main_image(image, image.src));
+    });
+
+
 }
 
 /**
@@ -61,3 +95,72 @@ function change_to_description(description_button, nutrition_button, displayed_t
 
     nutrition_button.style.backgroundColor = 'rgb(206, 208, 192)';
 }
+
+/**
+ * When an extra image is clicked on, the display switches the larger image with the extra image selected 
+ * @param {*} image extra image selected
+ * @param {*} new_src new source for the main image (technically not necessary as a parameter but leave it for now.)
+ */
+function change_main_image(image, new_src){
+    var current_main = document.getElementById("main-image");
+    var old_main_src = current_main.src;
+
+    current_main.src = new_src;
+    image.src = old_main_src;
+}
+
+
+/**
+ * Used to display the proper information for each grocery item selected in the list.
+ * @param {*} grocery_item specific item selected by the user
+ * @param {*} item_name Name displayed currently on the second column (technically not necessary but good to keep)
+ */
+function displayGroceryInformation(grocery_item, item_name){
+    const rest_list = document.querySelectorAll('.groceryItem');
+    for(var i = 0; i < rest_list.length; i++){
+        rest_list[i].style.backgroundColor = 'rgb(225, 228, 207)';
+        rest_list[i].style.color = 'black';
+    }
+
+    grocery_item.style.backgroundColor = '#7c9e57';
+    grocery_item.style.color = '#372d1f'
+
+    var newName = grocery_item.textContent;
+    item_name.textContent = newName;
+
+    var imageName = newName.toLowerCase();
+
+    var main_image = document.getElementById('main-image');
+
+    //tryImages(main_image, imageName);
+    main_image.src="./assets/images/" + imageName + "-icon.png";
+
+    var displayed_text = document.getElementById('displayed-text');
+
+    displayed_text.textContent = newName;
+
+    var extra_imgs = document.querySelectorAll("[class='extra-images']");
+    for(var i = 0; i < extra_imgs.length; i++){
+        let file = "./assets/images/extra-" + imageName + (i+1) + "-icon.png";
+
+        extra_imgs[i].src = file;
+
+        /*extra_imgs[i].src="./assets/images/" + imageName + "-icon.png";
+        extra_imgs[i].onerror = function(){
+            extra_imgs[i].src="./assets/images/" + imageName + '-icon.jpg';
+        };*/
+    }
+
+}
+
+/**
+ * does not work yet - trying to figure out how to use both jpg and png images.
+ * @param {*} img image whose source will be changed.
+ * @param {*} name specific name of the image to be added to an already-included path.
+ */
+function tryImages(img, name){
+    img.src = "./assets/images/" + name + ".jpg";
+    img.onerror = function() {
+        img.src = "./assets/images/" + name + ".png";
+    };
+}

source/make-list.html

@@ -6,6 +6,7 @@
         <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="./css/main.css">
         <link rel="stylesheet" href="./css/make-list.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <script src="./js/make-list.js" type="module"></script>
         <title>Go Go Grocery!</title>
     </head>
@@ -33,35 +34,54 @@ <h1>Go Go Grocery</h1>
             <!--CODE FOR THE PRODUCT LIST (wireframe page 6) - item | item image | description/nutrition fact-->
 
             <!--Add Item Button - on click, sends to item-price.html page-->
-            <button class="next-page-buttons" id="add-item-button" onclick="location.href = './item-price.html';">Add Item</button> 
+            <!-- <button class="next-page-buttons" id="add-item-button" onclick="location.href = './item-price.html';">Add Item</button> -->
 
 
             <div>
-                <textarea rows="1" cols="170" id="grocery-header" placeholder="Enter List Name"></textarea>
+                <div class='title'>
+                    <div class='list-name'><h1>
+                        <span id="listHeading">Current List Name</span>
+                        <button id="editListBtn"><i class="fas fa-pencil-alt"></i></button>
+                    </h1> 
+
+
+                    </div>
+                    <div class="next-page-buttons">
+                        <button class="menuBTN" id="addItemBtn" onclick="location.href = './item-price.html';">Add Item</button>
+                        <!-- <div class='divider'>hs</div> -->
+                        <button class="menuBTN" id="receiptPageBtn" onclick="location.href= './compare-stores.html';">Finished With Your List?</button>
+
+                    </div>
+
+                </div>
 
                 <div class="information-holder"> <!--3 Column Display-->
                     <!--Column 1: Holds Actual List of Items-->
                     <div class="column1">
                         <list id="item-list">
-                            <ul>hello</ul>
+                            <ul class="groceryItem">Banana</ul>
+                            <ul class="groceryItem">Strawberry</ul>
+                            <ul class="groceryItem">Blueberry</ul>
+                            <ul class="groceryItem">Pineapple</ul>
+                            <ul class="groceryItem">Grape</ul>
                         </list>
                     </div>
 
                     <!--Individual Item Display-->
                     <div class="column2">
-                        <h2 id="item-name">Name</h2>
+                        <h2 id="item-name">Banana</h2>
                         <div class="align-images-center">
-                            <img id="main-image" src="./assets/images/traderjoes-icon.png" width="100">
+                            <img id="main-image" src="./assets/images/banana-icon.png" width="100">
                         </div>
 
                         <!--Holds Extra Images of Item Selected-->
                         <div class="image-holder">
-                            <img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
-                            <img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
-                            <img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
-                            <img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
-                            <img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
-                            <img id="extra-images" src="./assets/images/traderjoes-icon.png" width="100">
+                            <img class="extra-images" src="./assets/images/extra-banana1-icon.png" width="100">
+                            <img class="extra-images" src="./assets/images/extra-banana2-icon.png" width="100">
+                            <img class="extra-images" src="./assets/images/banana-icon.png" width="100">
+                            <img class="extra-images" src="./assets/images/banana-icon.png" width="100">
+                            <img class="extra-images" src="./assets/images/banana-icon.png" width="100">
+                            <img class="extra-images" src="./assets/images/banana-icon.png" width="100">
                         </div>
                     </div>
 
@@ -72,14 +92,14 @@ <h2 id="item-name">Name</h2>
                                 <button id="description-button">Description</button>
                                 <button id="nutrition-button">Nutrition Facts</button>
                             </div>
-                            <p id="displayed-text">Description Text</p>
+                            <p id="displayed-text">Banana</p>
                         </div>
                     </div>
 
                 </div>
             </div>
-            <!--Finished List Button: on click, sends to compare-stores.html-->
-            <button class="next-page-buttons" id="finished-list-button" onclick="location.href= './compare-stores.html';">Finished with your list?</button>
+            <!--Finished List Button: on click, sends to compare-stores.html
+            <button class="next-page-buttons" id="finished-list-button" onclick="location.href= './compare-stores.html';">Finished with your list?</button> -->
         </main>
     </body>