Merge pull request #3 from JacobJanzen/dynamic-about

dyanamic about page

index.html

@@ -31,26 +31,23 @@
                         <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">
                     <img src = "My project.png" alt="logo"/>
             </div>
             <div class="search-bar">
                 <input type="text" class="search-bar" id="searchbar"></input>
             </div>
         </div>
-        <div class="main">
-            <h1>Bison Mart</h1>
-            <div id="itemlist">
+        <div class="main" id="main">
+            <div id="itemlist"/>
         </div>
         <div class="cart-button">Cart</div>
     </body>

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)