From 1b84ca7cf1322e96cb0ddc61462e5241a76e9a50 Mon Sep 17 00:00:00 2001
From: jonathannnty <141669529+jonathannnty@users.noreply.github.com>
Date: Wed, 4 Sep 2024 01:37:20 -0700
Subject: [PATCH] Finished user-page!

---
 source/css/user-page.css | 21 ++++++++++++++++++++-
 source/js/user-page.js   | 33 ++++++++++++++-------------------
 source/user-page.html    | 20 +++++++++++++-------
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/source/css/user-page.css b/source/css/user-page.css
index dc24f55..47baa8e 100644
--- a/source/css/user-page.css
+++ b/source/css/user-page.css
@@ -14,7 +14,7 @@
 
 .emoji {
   text-align: center;
-  font-size: 7.5rem;
+  font-size: 7rem;
   position: relative;
 }
 
@@ -70,6 +70,25 @@
   width: 96vw;
 }
 
+#existing_grocery_list_container {
+  height: 15em;
+  overflow-y: auto;
+  margin-bottom: 3em;
+}
+
+#existing_grocery_list {
+  display: none;
+  list-style-type: none;
+  font-size: 1.5em;
+  font-weight: 400;
+  height: auto;
+  padding: 0em 1.5em;
+}
+
+#existing_grocery_list li {
+  padding: 0.5em 0em;
+}
+
 .green-box {
   display: flex;
   flex-direction: column;
diff --git a/source/js/user-page.js b/source/js/user-page.js
index 6ec7333..18f8e2b 100644
--- a/source/js/user-page.js
+++ b/source/js/user-page.js
@@ -1,6 +1,7 @@
 // Hover over button, text-emoji changes to corresponding buttons
 const button_1 = document.querySelector("#button_1");
 const button_2 = document.querySelector("#button_2");
+const dropdown_area = document.querySelector("#dropdown_area");
 const emoji_text1 = document.querySelector("#emoji_1");
 const emoji_text2 = document.querySelector("#emoji_2");
 
@@ -14,7 +15,7 @@ let posY = 0;
 let velocityX = 2;
 let velocityY = 2;
 
-function animate() {
+function drift() {
   posX += velocityX;
   posY += velocityY;
   if (posX + logo.clientWidth > container.clientWidth || posX < 0) {
@@ -25,10 +26,20 @@ function animate() {
   }
   logo.style.left = `${posX}px`;
   logo.style.top = `${posY}px`;
-  requestAnimationFrame(animate);
+  requestAnimationFrame(drift);
 }
 
-animate();
+document.getElementById('button_2').addEventListener('click', function() {
+  var itemList = document.getElementById('existing_grocery_list');
+
+  if (itemList.style.display === "none") {
+      itemList.style.display = "block";  // Show the list
+  } else {
+      itemList.style.display = "none";  // Hide the list
+  }
+});
+
+drift();
 
 button_1.addEventListener(
   "mouseover",
@@ -48,20 +59,4 @@ button_1.addEventListener(
   1000
 );
 
-button_2.addEventListener(
-  "mouseover",
-  () => {
-    emoji_text2.textContent = "📋🧐💭";
-    emoji_text2.classList.remove("fade-out");
-  },
-  1000
-);
 
-button_2.addEventListener(
-  "mouseout",
-  () => {
-    emoji_text2.textContent = "&nbsp;";
-    emoji_text2.classList.add("fade-out");
-  },
-  1000
-);
diff --git a/source/user-page.html b/source/user-page.html
index ba1572e..e9bf771 100644
--- a/source/user-page.html
+++ b/source/user-page.html
@@ -49,16 +49,22 @@ <h3> What would you like to do today?</h3>
                     <h1 id="emoji_1" class="emoji">&nbsp;</h1>
                 
                 </div>
-                <div class="green-box">
+                <div id="dropdown_area" class="green-box">
                     <button id="button_2" class="interface-button">
-                        <a href="./receipt.html">View Existing List</a>
-                    </button> 
-                    <h1 id="emoji_2" class="emoji">&nbsp;</h1>
+                        <a>View Existing List</a>
+                    </button>
+                    <div id="existing_grocery_list_container">
+                        <ul id="existing_grocery_list">
+                            <li><a href="">Sunday Grocery Run</a></li>
+                            <li><a href="">Target Run</a></li>
+                            <li><a href="">Erewhon Haul</a></li>
+                            <li><a href="">Costco Trip</a></li>
+                            <li><a href="">Breakfast Club</a></li>
+                        </ul>
+                    </div>
                 </div>
-            </div>
-            
+            </div>      
         </main>
-        
         <br>
         <br>
         <script src="./js/user-page.js"></script>