cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<style>
body {
background-color: #555555;
}
.cart-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
text-align: center;
}
.cart-container h2 {
margin-bottom: 20px;
color: #333;
}
.cart-container table {
width: 100%;
margin-bottom: 20px;
}
.cart-container th,
.cart-container td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.cart-container th {
background-color: #f2f2f2;
}
.cart-container p {
font-size: 16px;
color: #333;
margin-top: 20px;
}
.cart-container button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.cart-container button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="cart-container">
<h2>Shopping Cart</h2>
<table>
<thead>
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="cart-items"></tbody>
</table>
<p>Total: $<span id="cart-total">0.00</span></p>
<button onclick="checkout()">Checkout</button>
</div>
<script>
function updateCart() {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
let total = parseFloat(localStorage.getItem('total')) || 0;
const cartItems = document.getElementById('cart-items');
const cartTotal = document.getElementById('cart-total');
cartItems.innerHTML = "";
cart.forEach((item, index) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.title}</td>
<td>$${item.price.toFixed(2)}</td>
<td>${item.quantity}</td>
<td>$${item.amount.toFixed(2)}</td>
`;
cartItems.appendChild(tr);
});
cartTotal.textContent = isNaN(total) ? "$0.00" : total.toFixed(2);
}
function checkout() {
let total = localStorage.getItem('total');
alert(`Thank you for your purchase! Total: $${total}`);
localStorage.removeItem('cart');
localStorage.removeItem('total');
updateCart();
}
// Initialize cart on page load
window.onload = function () {
updateCart();
};
</script>
</body>
</html>
