feat: carousel and components

restaurant/src/components/carousel.js

@@ -2,6 +2,31 @@ class Carousel {
     constructor(items) {
         this.items = items;
     };
+    
+    carouselDiv = document.createElement('div');
+    createComponent() {
+        this.carouselDiv.classList.add(['carousel']);
+
+        this.items.forEach(element => {
+            let div = document.createElement('div');
+            div.classList.add(['carousel-item']);
+
+            let heading = document.createElement('h1');
+            let desc = document.createElement('p');
+            let link = document.createElement('a');
+
+            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);
+        });
+        return this.carouselDiv;
+    };
 };
 
 
@@ -41,4 +66,9 @@ let carouselItems = [
     }
 ]
 
-carouselItems.forEach(e => new Items(e));
+let items = carouselItems.map(e => new Items(e.heading, e.desc, e.link));
+let carousel = new Carousel(items);
+
+export { carousel };
+
+

restaurant/src/index.js

@@ -1,11 +1,16 @@
-import { menuBar } from "./menu";
+import { carousel } from "./components/carousel"
+import { menuBar as navbar } from "./components/navbar";
 import './style.css'
 
-function navbar(){
-    const element = document.createElement('div');
-    let menu = new menuBar();
+function nav(){
+    const element = document.createElement('header');
+    const brandName = document.createElement('h1');
+    let menu = new navbar();
 
-    element.classList.add(['container']);
+    brandName.style.textAlign = 'center';
+    brandName.textContent = 'This Wondrous Coffee';
+    
+    element.appendChild(brandName);
     element.appendChild(menu);
    
     return element;
@@ -20,5 +25,6 @@ function content(data) {
     return content;
 
 }
-
-document.body.appendChild(navbar());
+let carouselComponent = carousel.createComponent();
+document.body.appendChild(nav());
+document.body.appendChild(carouselComponent);

restaurant/src/style.css

@@ -13,7 +13,7 @@
 
 .navbar {
     display: grid;
-    grid-template-columns: 150px 150px 150px;
+    grid-template-columns: repeat(3, 100px);
     gap: 15px;
 }