feat: navbar logic added

restaurant/src/components/contact.js

@@ -0,0 +1,17 @@
+function contactComponent(){
+    let div = document.createElement('contact');
+    div.classList.add(['contact']);
+    
+    let name = document.createElement('h2');
+    name.textContent = 'This Wondrous Life';
+
+    let link = document.createElement('p');
+    link.textContent = 'https://thiswondrouslife.com';
+
+    div.appendChild(name);
+    div.appendChild(link);
+
+    return div;
+}
+
+export { contactComponent };

restaurant/src/components/menu.js

@@ -0,0 +1,76 @@
+const menuItems = {
+    "drinks": [
+        {
+            "item": "latte",
+            "price": 2.99,
+            "desc": "A nice homemade latte from the Breville."
+        },
+        {
+            "item": "nespresso",
+            "price": 2.49,
+            "desc": "a nespresso pod coffee"
+        },
+        {
+            "item": "tea",
+            "price": 2,
+            "desc": "a steeped tea for ninjas"
+        }
+    ],
+    "snacks": [
+        {
+            "item": "cookies",
+            "price": 3.99,
+            "desc": "homemade chocolate chip cookies or another delicious treat"
+        },
+        {
+            "item": "pumpkin cake",
+            "price": 9.99,
+            "desc": "homemade pumpkin cake, leaving you wanting more"
+        }
+    ]
+}
+
+function menuComponent(){
+    const div = document.createElement('div');
+    div.classList.add(['cards']);
+    
+    const drinkHeader = document.createElement('h2');
+    const snackHeader = document.createElement('h2');
+    drinkHeader.classList.add('header');
+    snackHeader.classList.add('header');
+
+    drinkHeader.textContent = 'Drinks';
+    snackHeader.textContent = 'Snacks';
+
+    let drinks = card(menuItems['drinks']);
+    let snacks = card(menuItems['snacks']);
+
+    div.appendChild(drinkHeader);
+    drinks.forEach(e => div.appendChild(e));
+    div.appendChild(snackHeader);
+    snacks.forEach(e => div.appendChild(e));
+    
+    return div;
+
+}
+
+function card(item) {
+    return item.map(element => {
+        let div = document.createElement('div');
+        div.classList.add(['card']);
+
+        let item = document.createElement('p');
+        let price = document.createElement('p');
+        let desc = document.createElement('p');
+        item.textContent = element.item;
+        price.textContent = element.price;
+        desc.textContent = element.desc;
+
+        div.appendChild(item);
+        div.appendChild(price);
+        div.appendChild(desc);
+        return div;
+    });
+}
+
+export { menuComponent };

restaurant/src/index.js

@@ -4,10 +4,23 @@ import { menuBar as navbar } from "./components/navbar";
 import { menuComponent } from "./components/menu";
 import './style.css'
 
+let _carousel = carousel.createComponent();
+
+function website() {
+
+    // Navbar
+    document.body.appendChild(nav());
+
+    loadPage();
+
+}
+
 function nav(){
     const element = document.createElement('header');
     const brandName = document.createElement('h1');
+
     let menu = new navbar();
+    menu.addEventListener('click', e => loadPage(e.target.outerText));
     
     brandName.style.textAlign = 'center';
     brandName.textContent = 'This Wondrous Coffee';
@@ -16,19 +29,43 @@ function nav(){
     element.appendChild(menu);
    
     return element;
+};
+
+function loadPage(page='home') {
+    let home = _carousel;
+    let menu = menuComponent();
+    let contact = contactComponent();
+    let contentData;
+
+    switch(page){
+        case 'menu':
+            contentData = content(menu);
+            break;
+        case 'contact':
+            contentData = content(contact);
+            break;
+        default:
+            contentData = content(home);
+            break;
+        
+    }        
+    console.log(contentData);
+    document.body.appendChild(contentData);
 }
 
 function content(data) {
-    const content = document.createElement('div');
-    content.classList.add('content');
+    const old = document.querySelector('.content');
+    if (old) {
+        console.log(old);
+        old.textContent = '';
+        document.body.removeChild(old);
+    }
+    const _content = document.createElement('div');
+    _content.classList.add('content');
+    _content.appendChild(data);
     
-    console.log(data);
+    return _content;
 
-    return content;
+};
 
-}
-let carouselComponent = carousel.createComponent();
-document.body.appendChild(nav());
-document.body.appendChild(carouselComponent);
-document.body.appendChild(menuComponent());
-document.body.appendChild(contactComponent());
+website();