feat: first build complete

restaurant/app/src/components/carousel.js

@@ -0,0 +1,81 @@
+class Carousel {
+    constructor(items) {
+        this.items = items;
+    };
+    
+    carouselDiv = document.createElement('div');
+    createComponent() {
+        let count = 0;
+        this.carouselDiv.classList.add(['carousel']);
+    
+        this.items.forEach(element => {
+            let div = document.createElement('div');
+
+            let classList = count === 0 ? ['carousel-item', 'slide-visible'] : ['carousel-item', 'slide-hidden'];
+            div.classList.add(...classList);
+
+
+            let heading = document.createElement('h1');
+            let desc = document.createElement('p');
+            let link = document.createElement('a');
+            link.href = '#';
+            link.type = 'button';
+
+            heading.textContent = element.heading;
+            desc.textContent = element.desc;
+            link.textContent = element.link;
+
+            div.appendChild(heading);
+            div.appendChild(desc);
+            div.appendChild(link);
+
+            this.carouselDiv.appendChild(div);
+            count += 1;
+        });
+        return this.carouselDiv;
+    };
+};
+
+
+class Items {
+    constructor(heading, desc, link) {
+        this.heading = heading;
+        this.desc = desc;
+        this.link = link;
+
+        this._item = {
+            heading: this.heading,
+            desc: this.desc,
+            link: this.link
+        }
+    }
+
+    get item() {
+        return this._item;
+    }
+}
+
+let carouselItems = [
+    {
+        "heading": "Specialty Baked Goods and coffee",
+        "desc": "Exclusively delicious baked goods, homemade and all that",
+        "link": "Order Now!"
+    },
+    // {
+    //     "heading": "Subscribe and Save today!",
+    //     "desc": "We offer flexible subscription plans to meet your needs",
+    //     "link": "Get started"
+    // },
+    // {
+    //     "heading": "Explore our blog",
+    //     "desc": "This Wondrous Life teaches you how to dream, inspire, and embrace life",
+    //     "link": "Embrace this"
+    // }
+]
+
+let items = carouselItems.map(e => new Items(e.heading, e.desc, e.link));
+let carousel = new Carousel(items);
+
+export { carousel };
+
+

restaurant/app/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/app/src/components/menu.js

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

restaurant/app/src/components/navbar.js

@@ -0,0 +1,26 @@
+function menuBar() {
+    const items = [
+        'HOME',
+        'MENU',
+        'CONTACT'
+    ];
+
+    const navbar = document.createElement('div');
+    navbar.classList.add(['nav']);
+    
+    const ul = document.createElement('ul');
+    ul.classList.add('navbar');
+
+    items.forEach(e => {
+        let li = document.createElement('li');
+        li.textContent = e;
+
+        ul.appendChild(li);
+    });
+    
+    navbar.appendChild(ul);
+    return navbar;
+    
+}
+
+export { menuBar };