From 6ba051468f285d149820bcae4661bc1ec6e30eff Mon Sep 17 00:00:00 2001
From: Jacob Janzen <jacob.a.s.janzen@gmail.com>
Date: Thu, 23 Mar 2023 13:39:09 -0500
Subject: [PATCH] dyanamic about page

---
 index.html    | 15 ++++++---------
 src/script.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 8b553e4..1da443b 100644
--- a/index.html
+++ b/index.html
@@ -31,17 +31,15 @@
                         <div class="name" data-text="Recipes">RECIPES</div>
                     </a>
                 </li>
-                <li class="side-menu-item">
-                    <a href="about.html">
-                        <div class="icon"></div>
-                            <i class="material-icons" style="font-size: 3em;">flatware</i>
-                        <div class="name" data-text="About Us">ABOUT US</div>
-                    </a>
+                <li class="side-menu-item" id="about-menu-item">
+                    <div class="icon"></div>
+                        <i class="material-icons" style="font-size: 3em;">flatware</i>
+                    <div class="name" data-text="About Us">ABOUT US</div>
                 </li>
             </ul>
         </nav>
         <div class="top-bar">
-            <div class="logo">
+            <div class="logo" id="logo">
                 <h1>
                     <i class="material-icons" style="font-size: 2em;">fullscreen_exit</i>
                 </h1>
@@ -50,8 +48,7 @@ <h1>
                 <input type="text" class="search-bar" id="searchbar"></input>
             </div>
         </div>
-        <div class="main">
-            <h1>Main Page</h1>
+        <div class="main" id="main">
             <div id="itemlist"/>
         </div>
         <div class="cart-button">Cart</div>
diff --git a/src/script.js b/src/script.js
index fdbf0d0..5489cb2 100644
--- a/src/script.js
+++ b/src/script.js
@@ -38,6 +38,12 @@ items = [
 ]
 
 function init() {
+    document.getElementById("about-menu-item").addEventListener("click", () => {
+        aboutUs()
+    })
+    document.getElementById("logo").addEventListener("click", () => {
+        backToProducts()
+    })
     document.getElementById("searchbar").addEventListener("keyup", () => {
         updateProductList(document.getElementById("searchbar").value, items)
     })
@@ -60,4 +66,33 @@ function updateProductList(text, items) {
     currentDiv.replaceWith(newDiv)
 }
 
+function backToProducts() {
+    const main = document.createElement("div")
+    main.setAttribute("class", "main")
+    main.setAttribute("id", "main")
+
+    const itemList = document.createElement("div")
+    itemList.setAttribute("id", "itemlist")
+
+    main.appendChild(itemList)
+
+    document.getElementById("main").replaceWith(main)
+    updateProductList(document.getElementById("searchbar").value, items)
+}
+
+function aboutUs() {
+    const main = document.createElement("div")
+    main.setAttribute("class", "main")
+    main.setAttribute("id", "main")
+    main.innerHTML = `
+    <p>At HCI we aren't your average local grocery store. We want your shopping experinece to be simple, efficient and fun. We recognize that shopping for groceries is seen as a mundane, obligatory task that must be completed week after week. We are on a mission to change that.</p>
+            <p>We were founded by a group of students studying Computer Science at the University of Manitoba. We were chronically exhausted, overworked and overwhelmed. The last thing we needed was the added stressor of grocery shopping, planning, cooking and meal prepping. We wanted a streamlined experience. We wanted to spend less time planning and more time eating good food.</p>
+            <p>This vision gave rise to HCI groceries.</p>
+            <p>We want you to have fun. We want you to have more time. We want you to be healthy and happy. If this in line with your goals, you have come to the right place.</p>
+            <p>What are you waiting for? Insert link to categories page here, can maybe add a link where the label is "want to have fun" and then they go to the wordle page bc honestly I think its a fun idea and I disagree with the marker- </p>
+    `
+
+    document.getElementById("main").replaceWith(main)
+}
+
 window.addEventListener("load", init)