From f6f084fa5d8e1df831579c3296e9c6967419f7c3 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Wed, 20 Dec 2023 06:37:50 -0500 Subject: [PATCH] feat: added styling --- restaurant/src/components/carousel.js | 11 +++- restaurant/src/components/menu.js | 33 +++++----- restaurant/src/style.css | 93 ++++++++++++++++++++++++++- 3 files changed, 119 insertions(+), 18 deletions(-) diff --git a/restaurant/src/components/carousel.js b/restaurant/src/components/carousel.js index 7ce9a41..6fbf6e0 100644 --- a/restaurant/src/components/carousel.js +++ b/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; }; diff --git a/restaurant/src/components/menu.js b/restaurant/src/components/menu.js index 7669c9c..b6cbcd0 100644 --- a/restaurant/src/components/menu.js +++ b/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'); - snackHeader.classList.add('header'); + drinkHeader.classList.add(['header', 'drink-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); - drinks.forEach(e => div.appendChild(e)); - div.appendChild(snackHeader); - snacks.forEach(e => div.appendChild(e)); + 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; @@ -59,15 +65,12 @@ function card(item) { let div = document.createElement('div'); div.classList.add(['card']); - let item = document.createElement('p'); - let price = document.createElement('p'); + let item = document.createElement('h3'); 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; }); diff --git a/restaurant/src/style.css b/restaurant/src/style.css index f7ff5dd..851805d 100644 --- a/restaurant/src/style.css +++ b/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; }