Finished user-page!

acmucsd-projects · Sep 4, 2024 · 1b84ca7 · 1b84ca7
1 parent ec0d04c
commit 1b84ca7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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>