It is necessary that when the user proceeds to checkout, he/she must have a receipt when he/she is finished, so that he/she can receive what date it is and what item he/she checked out.
// Sample product data
const products = [
{ id: 1, name: "Apple Airpods Max", price: 549.00, image: "https://www.designinfo.in/wp-content/uploads/2024/04/Apple-AirPods-Max-Silver-1-485x485-optimized.webp" },
{ id: 2, name: "Smart Watch", price: 149.99, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 3, name: "JBL Bluetooth Speaker", price: 79.99, image: "https://powermaccenter.com/cdn/shop/files/JBLI380RED012000x2000.jpg?v=1692056928&width=823" },
{ id: 4, name: "Laptop", price: 549.00, image: "https://www.gigahertz.com.ph/cdn/shop/files/asus-rog-strix-g16-g614ju-n4450w-asus-gigahertz-738962_1024x.jpg?v=1721109820" },
{ id: 5, name: "Iphone 16 Pro", price: 999.99, image: "https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/MA7F4_AV2?wid=1144&hei=1144&fmt=jpeg&qlt=90&.v=cEMrK1BETUx0R013ckd3MURLdGo3MVZya2lKWlJmUEwrYndWOTJiVWJWQUYwVmtIbGRkS25RMVpBRlo0bk5DUVJsakxPWm1CZ1BPV2ljSkhYY2hhdnc" },
{ id: 6, name: "Tablet", price: 499.99, image: "https://images.unsplash.com/photo-1527698266440-12104e498b76?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 7, name: "Playstation 5 Pro", price: 699.99, image: "https://gmedia.playstation.com/is/image/SIEPDC/ps5-product-thumbnail-01-en-14sep21?$facebook$" },
{ id: 8, name: "Nikon DSLR Camera", price: 699.95, image: "https://img.lazcdn.com/g/p/0a98797fb3f85372127bc498abb37b1a.jpg_720x720q80.jpg" },
{ id: 9, name: "Wireless Earbuds", price: 149.99, image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 10, name: "Fitness Tracker", price: 169.99, image: "https://images.unsplash.com/photo-1576243345690-4e4b79b63288?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 11, name: "External Hard Drive", price: 89.99, image: "https://m.media-amazon.com/images/I/61l2QYs4gKL.AC_SL1500.jpg" },
{ id: 12, name: "HyperX Alloy Rise 75", price: 282.23, image: "https://hyperx.com/cdn/shop/files/hyperx_alloy_rise_75_wireless_us_91y91aa_23aba_main_1_grande.jpg?v=1734190103" },
{ id: 13, name: "Wireless Mouse", price: 7.46, image: "https://www.officewarehouse.com.ph/__resources/_web_data_/products/products/image_gallery/8036_6676.jpg" },
{ id: 14, name: "Monitor", price: 264.95, image: "https://www.tech-america.com/dd2/img/item/300x300-ORIGINAL/V/VG32UQA1A-right.jpg" },
{ id: 15, name: "Printer", price: 129.99, image: "https://ph.canon/media/image/2024/12/11/04de1b5f9d6c4bb3a82f36c6f1332bef_ProL_PKG_FR_EN_24_362.png" },
{ id: 16, name: "Router", price: 79.99, image: "https://m.media-amazon.com/images/I/616+VhWBhOL.AC_SL1500.jpg" },
{ id: 17, name: "Power Bank", price: 39.99, image: "https://ventiontech.com/cdn/shop/files/1000_09cb6003-263c-4369-bc8f-24e13eeb93f1.jpg?v=1715936793" },
{ id: 18, name: "USB Flash Drive", price: 19.99, image: "https://upload.wikimedia.org/wikipedia/commons/1/17/SanDisk-Cruzer-USB-4GB-ThumbDrive.jpg" },
{ id: 19, name: "Webcam", price: 69.99, image: "https://resource.logitech.com/w_800,c_lpad,ar_4:3,q_auto,f_auto,dpr_1.0/d_transparent.gif/content/dam/logitech/en/products/webcams/brio/gallery/brio-gallery-1.png?v=1" },
{ id: 20, name: "Microphone", price: 89.99, image: "https://gameone.ph/media/catalog/product/cache/d378a0f20f83637cdb1392af8dc032a2/4/_/4_1_2.jpg" }
];
// Cart functionality
let cart = [];
// DOM elements
const productsGrid = document.getElementById('products');
const cartIcon = document.querySelector('.cart-icon');
const cartOverlay = document.querySelector('.cart-overlay');
const closeCart = document.querySelector('.close-cart');
const cartItemsContainer = document.querySelector('.cart-items');
const cartTotal = document.querySelector('.total-amount');
const cartCount = document.querySelector('.cart-count');
const checkoutBtn = document.querySelector('.checkout-btn');
// Display products
function displayProducts() {
productsGrid.innerHTML = products.map(product => `
<div class="product-card">
<div class="product-image">
<img src="${product.image}" alt="${product.name}">
</div>
<div class="product-info">
<h3 class="product-title">${product.name}</h3>
<p class="product-price">$${product.price.toFixed(2)}</p>
<button class="add-to-cart" data-id="${product.id}">Add to Cart</button>
</div>
</div>
`).join('');
// Add event listeners to all add to cart buttons
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', addToCart);
});
}
// Add to cart function
function addToCart(e) {
const productId = parseInt(e.target.dataset.id);
const product = products.find(item => item.id === productId);
// Check if product already in cart
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
...product,
quantity: 1
});
}
updateCart();
showCartNotification();
}
// Update cart display
function updateCart() {
cartItemsContainer.innerHTML = cart.map(item => `
<div class="cart-item">
<div class="cart-item-image">
<img src="${item.image}" alt="${item.name}">
</div>
<div class="cart-item-details">
<h4 class="cart-item-title">${item.name}</h4>
<p class="cart-item-price">$${item.price.toFixed(2)}</p>
<button class="cart-item-remove" data-id="${item.id}">Remove</button>
</div>
<div class="cart-item-quantity">
<span>Qty: ${item.quantity}</span>
</div>
</div>
`).join('');
// Calculate total
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
cartTotal.textContent = total.toFixed(2);
// Update cart count
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
cartCount.textContent = count;
// Add event listeners to remove buttons
document.querySelectorAll('.cart-item-remove').forEach(button => {
button.addEventListener('click', removeFromCart);
});
}
// Remove from cart
function removeFromCart(e) {
const productId = parseInt(e.target.dataset.id);
cart = cart.filter(item => item.id !== productId);
updateCart();
}
// Show cart notification
function showCartNotification() {
cartIcon.classList.add('shake');
setTimeout(() => {
cartIcon.classList.remove('shake');
}, 500);
}
// Generate receipt HTML
function generateReceipt() {
const now = new Date();
const dateStr = now.toLocaleDateString();
const timeStr = now.toLocaleTimeString();
const itemsHtml = cart.map(item => `
<tr>
<td>${item.name}</td>
<td>${item.quantity}</td>
<td>$${item.price.toFixed(2)}</td>
<td>$${(item.price * item.quantity).toFixed(2)}</td>
</tr>
`).join('');
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
return `
<div class="receipt" id="receipt-content">
<div class="receipt-header">
<h2>Titan Technology</h2>
<p>Premium Electronics</p>
<p>${dateStr} ${timeStr}</p>
</div>
<table class="receipt-items">
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
${itemsHtml}
</tbody>
</table>
<div class="receipt-total">
<p>Total: $${total.toFixed(2)}</p>
</div>
<div class="receipt-footer">
<p>Thank you for shopping with us!</p>
<p>www.titech.com</p>
</div>
</div>
`;
}
// Print receipt
function printReceipt() {
const receiptContent = generateReceipt();
const printWindow = window.open('', '', 'width=600,height=600');
printWindow.document.write(`
<html>
<head>
<title>Receipt</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
.receipt { width: 300px; margin: 0 auto; }
.receipt-header { text-align: center; margin-bottom: 20px; }
.receipt-header h2 { margin: 0; font-size: 24px; }
.receipt-header p { margin: 5px 0; }
.receipt-items { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.receipt-items th, .receipt-items td { padding: 5px; text-align: left; border-bottom: 1px dashed #ccc; }
.receipt-total { text-align: right; font-weight: bold; font-size: 18px; margin-bottom: 20px; }
.receipt-footer { text-align: center; font-size: 14px; color: #666; }
@media print {
body { -webkit-print-color-adjust: exact; }
}
</style>
</head>
<body>
${receiptContent}
<script>
window.onload = function() {
setTimeout(function() {
window.print();
window.close();
}, 200);
};
</script>
</body>
</html>
`);
printWindow.document.close();
}
// Checkout function
function checkout() {
if (cart.length === 0) {
alert('Your cart is empty!');
return;
}
printReceipt();
cart = [];
updateCart();
closeCartOverlay();
}
// Toggle cart overlay
function toggleCartOverlay() {
cartOverlay.style.display = cartOverlay.style.display === 'flex' ? 'none' : 'flex';
}
// Close cart overlay
function closeCartOverlay() {
cartOverlay.style.display = 'none';
}
// Event listeners
cartIcon.addEventListener('click', toggleCartOverlay);
closeCart.addEventListener('click', closeCartOverlay);
checkoutBtn.addEventListener('click', checkout);
// Initialize
displayProducts();