feat: added styling

restaurant/src/components/carousel.js

@@ -5,15 +5,21 @@ class Carousel {
     
     carouselDiv = document.createElement('div');
     createComponent() {
+        let count = 0;
         this.carouselDiv.classList.add(['carousel']);
-
+    
         this.items.forEach(element => {
             let div = document.createElement('div');
-            div.classList.add(['carousel-item']);
+
+            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;
@@ -24,6 +30,7 @@ class Carousel {
             div.appendChild(link);
 
             this.carouselDiv.appendChild(div);
+            count += 1;
         });
         return this.carouselDiv;
     };

restaurant/src/components/menu.js

@@ -2,42 +2,45 @@ 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"
+        },
+        {
+            "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');
+    drinkHeader.classList.add(['header', 'drink-header']);
-    snackHeader.classList.add('header');
+    snackHeader.classList.add(['header', 'snack-header']);
 
     drinkHeader.textContent = 'Drinks';
     snackHeader.textContent = 'Snacks';
@@ -45,10 +48,13 @@ function menuComponent(){
     let drinks = card(menuItems['drinks']);
     let snacks = card(menuItems['snacks']);
 
-    div.appendChild(drinkHeader);
+    drinksDiv.appendChild(drinkHeader);
-    drinks.forEach(e => div.appendChild(e));
+    drinks.forEach(e => drinksDiv.appendChild(e));
-    div.appendChild(snackHeader);
+    snacksDiv.appendChild(snackHeader);
-    snacks.forEach(e => div.appendChild(e));
+    snacks.forEach(e => snacksDiv.appendChild(e));
+
+    div.appendChild(drinksDiv);
+    div.appendChild(snacksDiv);
     
     return div;
 
@@ -59,15 +65,12 @@ function card(item) {
         let div = document.createElement('div');
         div.classList.add(['card']);
 
-        let item = document.createElement('p');
+        let item = document.createElement('h3');
-        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;
     });

restaurant/src/style.css

@@ -1,3 +1,26 @@
+:root {
+    --font-size: 18px;
+    --light-color: #E8E8E8;
+}
+
+
+body, html {
+    margin: 0;
+    padding: 0;
+    font-size: var(--font-size);
+}
+
+header {
+    min-height: 71px;
+}
+
+header>h1 {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 5px;
+}
+
+
 .container {
     display: flex;
     flex-direction: column;
@@ -13,10 +36,78 @@
 
 .navbar {
     display: grid;
-    grid-template-columns: repeat(3, 100px);
+    grid-template-columns: repeat(3, 110px);
     gap: 15px;
 }
 
 .navbar li {
     list-style-type: none;
+    font-size: 1.3rem;
+}
+
+.content {
+    display: flex;
+    justify-content: center;
+    min-height: 90vh;
+    margin-top: 150px;
+}
+
+/* .carousel-item { */
+/*     margin-top: 100px; */
+/*     display: flex; */
+/*     flex-direction: column; */
+/*     min-height: 80vh; */
+/*     width: 100%; */
+/* } */
+
+.cards {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    width: 260px;
+    height: 260px;
+    padding: 20px;
+    background-color: var(--light-color);
+}
+
+.card>h3 {
+    padding: 0;
+    margin: 0;
+}
+
+.drinks-container {
+    display: grid;
+    grid-template-columns: repeat(3, 300px);
+    align-items: center;
+    gap: 30px;
+}
+
+.drinks-container>h2 {
+    grid-column: 1 / span 3;
+    align-self: center;
+}
+
+
+.snacks-container {
+    display: grid;
+    grid-template-columns: repeat(3, 300px);
+    align-items: center;
+    gap: 30px;
+}
+
+.snacks-container>h2 {
+    grid-column: 1 / span 3;
+}
+
+.carousel .slide-hidden {
+    display: none;
 }