diff --git a/final/cart.html b/final/cart.html new file mode 100644 index 0000000..057ae5d --- /dev/null +++ b/final/cart.html @@ -0,0 +1,26 @@ + + + + + + Slice Haven + + + + +
+

Your Cart:

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/final/css/style.css b/final/css/style.css index e6dd3b6..823bed6 100644 --- a/final/css/style.css +++ b/final/css/style.css @@ -344,11 +344,29 @@ a { /* SECTION 4 */ .main-sect { - display: flex; - flex-direction: column; + display: grid; gap: 20px; } +.cart-cont { + display: flex; + align-items: center; + div { + background-color: #fa5000; + border-radius: 20px; + height: 35px; + width: 35px; + display: flex; + justify-content: center; + align-items: center; + } +} + +.cart-num { + color: white; + margin: 0; +} + .main-nav { display: grid; grid-template-columns: 1fr 1fr; @@ -356,7 +374,6 @@ a { .main-icons { width: 60px; - padding: 20px; fill: #fa5000; } @@ -370,7 +387,7 @@ a { position: relative; z-index: 1; height: 70vh; - margin-top: -70px; + margin-top: -120px; pointer-events: none; overflow: hidden; } @@ -447,12 +464,18 @@ a { } .carousel-btn { + color: #fa5000; grid-row: 2; grid-column: 1; - background-color: #fa5000; + border: #fa5000 3px solid; + background-color: transparent; border-radius: 40px; - border: none; font-size: 1.5em; + transition: all .2s ease; + &:active { + background-color: #fa5000; + color: white; + } } img { @@ -502,4 +525,140 @@ a { text-transform: uppercase; opacity: .4; } +} + +.customize { + margin-top: -30px; + background-color: #fa5000; + border-radius: 40px; + border: none; + font-size: 2.3em; + width: 300px; + height: 65px; + justify-self: center; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + .customize-icon { + width: 20px; + fill: white; + } +} + +.back { + margin-top: 30px; + background-color: #fa5000; + border-radius: 40px; + border: none; + font-size: 2.3em; + width: 300px; + height: 65px; + justify-self: center; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + .back-icon { + width: 20px; + fill: white; + rotate: 180deg; + } +} + +.cart-sect { + padding-top: 75px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + h1 { + font-size: 4em; + margin: 0; + } +} + +.cart-list { + height: 600px; + overflow-x: hidden; + overflow-y: scroll; + width: 330px; + padding: 0px 25px; + display: flex; + flex-direction: column; + h2 { + font-size: 2em; + } +} + +hr { + border-top: 2px solid rgba(0, 0, 0, 0.201); + width: 340px; +} + +.cart-card { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr min-content min-content; + row-gap: 3px; + img { + grid-column: 1; + grid-row: 1 / -1; + width: 100px; + height: min-content; + } + h2 { + grid-column: 2; + grid-row: 1; + margin: 0; + align-self: flex-end; + } + h3 { + grid-column: 2; + grid-row: 2; + margin: 0; + align-self: flex-start; + font-size: 1.5em; + } +} + +.amount-cont { + width: 100px; + grid-column: 2; + grid-row: 3; + align-self: flex-start; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + h4 { + margin: 0; + font-size: 1.25em; + align-self: center; + justify-self: center; + } +} + +.amount-icon { + width: 15px; + fill: white; + transition: all .2s ease; +} + +.quantity-btn { + align-self: center; + justify-self: center; + border: none; + border-radius: 20px; + background-color: #fa5000; + display: flex; + justify-content: center; + align-items: center; + width: 28px; + height: 28px; + transition: all .2s ease; + &:active { + background-color: black; + .amount-icon { + fill: white; + } + } } \ No newline at end of file diff --git a/final/images/Eye-Closed.svg b/final/images/Eye-Closed.svg deleted file mode 100644 index 0d826a4..0000000 --- a/final/images/Eye-Closed.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/final/images/Eye-Open.svg b/final/images/Eye-Open.svg deleted file mode 100644 index 308d1d9..0000000 --- a/final/images/Eye-Open.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/final/main.html b/final/main.html index 6e95ecc..16616ec 100644 --- a/final/main.html +++ b/final/main.html @@ -10,12 +10,19 @@
- - - - - - + + + + + + +
+

0

+
+ + + +

Find Your Pie!

@@ -23,8 +30,8 @@

Find Your Pie!

-

Pepperoni

-

$12.50

+

Pepperoni

+

$12.50

@@ -33,8 +40,8 @@

$12.50

-

Tomato & Onions

-

$13.50

+

Tomato & Onions

+

$13.50

@@ -43,8 +50,8 @@

$13.50

-

Mushroom & Olives

-

$13.50

+

Mushroom & Olives

+

$13.50

@@ -53,8 +60,8 @@

$13.50

-

Pepperoni

-

$12.50

+

Pepperoni

+

$12.50

@@ -63,8 +70,8 @@

$12.50

-

Tomato & Onions

-

$13.50

+

Tomato & Onions

+

$13.50

@@ -73,8 +80,8 @@

$13.50

-

Mushroom & Olives

-

$13.50

+

Mushroom & Olives

+

$13.50

@@ -83,8 +90,8 @@

$13.50

-

Pepperoni

-

$12.50

+

Pepperoni

+

$12.50

@@ -93,8 +100,8 @@

$12.50

-

Tomato & Onions

-

$13.50

+

Tomato & Onions

+

$13.50

@@ -103,8 +110,8 @@

$13.50

-

Mushroom & Olives

-

$13.50

+

Mushroom & Olives

+

$13.50

@@ -113,13 +120,18 @@

$13.50

-

Pepperoni

-

$12.50

- +

Pepperoni

+

$12.50

+
+
diff --git a/final/script.js b/final/script.js index 4f76001..143a65f 100644 --- a/final/script.js +++ b/final/script.js @@ -1,3 +1,5 @@ +let cartItems = []; + document.addEventListener('DOMContentLoaded', function () { if(location.href.includes("sign-in.html")){ signInPage() @@ -7,8 +9,10 @@ document.addEventListener('DOMContentLoaded', function () { indexPage() } else if(location.href.includes("welcome.html")) { welcomePage() - } else if(this.location.href.includes("main.html")) { + } else if(location.href.includes("main.html")) { mainPage() + } else if(location.href.includes("cart.html")) { + cartPage() } }); @@ -96,17 +100,42 @@ function mainPage() { const $items = document.querySelectorAll('.carousel-item'); const $cursors = document.querySelectorAll('.cursor'); + cartItems = getCartItemsFromStorage(); + + const addItem = () => { + const activeItem = $items[active]; + const itemImage = activeItem.querySelector('img').src; + const itemName = activeItem.querySelector('.name').innerText; + const itemPrice = activeItem.querySelector('.price').innerText; + let cartNum = document.querySelector('.cart-num') + + const newItem = { + image: itemImage, + name: itemName, + price: itemPrice + }; + + addItemToCart(newItem); + console.log(newItem) + + console.log('Item added to cart:', newItem); + console.log('Cart Items:', cartItems); + + updateCartNumber(); + }; + const displayItems = (item, index, active) => { - const zIndex = getZindex([...$items], active)[index]; - item.style.setProperty('--zIndex', zIndex); - item.style.setProperty('--active', (index - active) / $items.length); + const zIndex = getZindex([...$items], active)[index]; + item.style.setProperty('--zIndex', zIndex); + item.style.setProperty('--active', (index - active) / $items.length); - const carouselText = item.querySelector('.carousel-text'); - if (index === active) { - carouselText.style.opacity = '1'; - } else { - carouselText.style.opacity = '0'; - } + const carouselText = item.querySelector('.carousel-text'); + if (index === active) { + carouselText.style.opacity = '1'; + + } else { + carouselText.style.opacity = '0'; + } }; const animate = () => { @@ -133,7 +162,7 @@ function mainPage() { const handleMouseMove = (e) => { if (e.type === 'mousemove') { $cursors.forEach(($cursor) => { - $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; + $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); } if (!isDown) return; @@ -160,10 +189,99 @@ function mainPage() { document.addEventListener('touchstart', handleMouseDown); document.addEventListener('touchmove', handleMouseMove); document.addEventListener('touchend', handleMouseUp); + + const $carouselButtons = document.querySelectorAll('.carousel-btn'); + $carouselButtons.forEach(button => { + button.addEventListener('click', addItem); + }); + + function updateCartNumber() { + const totalQuantity = cartItems.reduce((total, item) => total + item.quantity, 0); + const cartNum = document.querySelector('.cart-num'); + cartNum.innerHTML = `${totalQuantity}`; + } +} + +function cartPage() { + cartItems = getCartItemsFromStorage(); + console.log(cartItems) + renderCartItems(); +} + +function addItemToCart(newItem) { + const existingItemIndex = cartItems.findIndex(item => item.name === newItem.name); + if (existingItemIndex !== -1) { + cartItems[existingItemIndex].quantity += 1; + } else { + newItem.quantity = 1; + cartItems.push(newItem); + } + updateCart(); +} + +function getCartItemsFromStorage() { + const storedCartItems = localStorage.getItem('cartItems'); + return storedCartItems ? JSON.parse(storedCartItems) : []; +} + +function updateCart() { + localStorage.setItem('cartItems', JSON.stringify(cartItems)); } function submitForm(event) { console.log("submitForm working") event.preventDefault(); window.location.href="welcome.html"; -} \ No newline at end of file +} + +function renderCartItems() { + const cartContainer = document.querySelector('.cart-list'); + cartContainer.innerHTML = ''; + + if (cartItems.length === 0) { + cartContainer.innerHTML = '

There is nothing in your cart!

'; + } else { + cartItems.forEach((item, index) => { + const itemHTML = ` +
+ Pizza Preview +

${item.name}

+

${item.price}

+
+ +

${item.quantity}

+ +
+
+
+ `; + cartContainer.innerHTML += itemHTML; + }); + } +} + +function increaseQuantity(index) { + cartItems[index].quantity++; + document.getElementById(`quantity-${index}`).textContent = cartItems[index].quantity; + updateCart(); +} + +function decreaseQuantity(index) { + if (cartItems[index].quantity > 1) { + cartItems[index].quantity--; + document.getElementById(`quantity-${index}`).textContent = cartItems[index].quantity; + updateCart(); + } else { + cartItems.splice(index, 1); + renderCartItems(); + updateCart(); + } +}