diff --git a/final/checkout.html b/final/checkout.html
new file mode 100644
index 0000000..964a564
--- /dev/null
+++ b/final/checkout.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ Slice Haven
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/final/css/style.css b/final/css/style.css
index 69c5430..ce07afb 100644
--- a/final/css/style.css
+++ b/final/css/style.css
@@ -585,6 +585,10 @@ a {
}
}
+.check-off {
+ background-color: rgb(128, 128, 128);
+}
+
.cart-sect {
padding-top: 75px;
width: 100%;
@@ -680,4 +684,9 @@ hr {
fill: white;
}
}
+}
+
+.cart-total {
+ font-size: 2em;
+ margin: 15px;
}
\ No newline at end of file
diff --git a/final/script.js b/final/script.js
index 143a65f..aa10a59 100644
--- a/final/script.js
+++ b/final/script.js
@@ -1,4 +1,5 @@
let cartItems = [];
+let checkoutBtn = document.querySelector('.check-out')
document.addEventListener('DOMContentLoaded', function () {
if(location.href.includes("sign-in.html")){
@@ -13,6 +14,8 @@ document.addEventListener('DOMContentLoaded', function () {
mainPage()
} else if(location.href.includes("cart.html")) {
cartPage()
+ } else if(location.href.includes("checkout.html")) {
+ checkoutPage()
}
});
@@ -122,6 +125,7 @@ function mainPage() {
console.log('Cart Items:', cartItems);
updateCartNumber();
+ checkoutClassUpdate()
};
const displayItems = (item, index, active) => {
@@ -200,12 +204,39 @@ function mainPage() {
const cartNum = document.querySelector('.cart-num');
cartNum.innerHTML = `${totalQuantity}`;
}
+
+ checkoutClassUpdate()
+
+ checkoutBtn.addEventListener('click', checkoutLink)
+}
+
+function checkoutClassUpdate() {
+ if (location.href.includes("checkout.html")) {
+
+ } else {
+ if (cartItems.length === 0) {
+ checkoutBtn.classList.add('check-off')
+ } else {
+ checkoutBtn.classList.remove('check-off')
+ }
+ }
+}
+
+function checkoutLink() {
+ if (cartItems.length === 0) {
+
+ } else {
+ window.location.href="checkout.html";
+ }
}
function cartPage() {
cartItems = getCartItemsFromStorage();
console.log(cartItems)
renderCartItems();
+ checkoutClassUpdate()
+
+ checkoutBtn.addEventListener('click', checkoutLink)
}
function addItemToCart(newItem) {
@@ -272,6 +303,8 @@ function increaseQuantity(index) {
cartItems[index].quantity++;
document.getElementById(`quantity-${index}`).textContent = cartItems[index].quantity;
updateCart();
+ checkoutClassUpdate()
+ calculateTotalPrice();
}
function decreaseQuantity(index) {
@@ -284,4 +317,25 @@ function decreaseQuantity(index) {
renderCartItems();
updateCart();
}
+ checkoutClassUpdate()
+ calculateTotalPrice();
}
+
+function checkoutPage() {
+ cartItems = getCartItemsFromStorage();
+ console.log(cartItems)
+ renderCartItems();
+ calculateTotalPrice();
+
+}
+
+function calculateTotalPrice() {
+ let totalPrice = 0;
+ cartItems.forEach(item => {
+ const price = parseFloat(item.price.replace(/[^0-9.-]+/g, ''));
+ totalPrice += price * item.quantity;
+ });
+ let checkoutTotal = document.querySelector('.cart-total');
+ checkoutTotal.textContent = `Total: $${totalPrice.toFixed(2)}`;
+ return totalPrice;
+}
\ No newline at end of file