Electronics Store Codebase Enhancement
Interactive Shopping Cart, Dynamic Calculations & Modern Order Success Experience
SUMMARY OF KEY UPGRADES IMPLEMENTED
• Dynamic Quantity Management: Items added to the cart increment quantities automatically instead of creating
duplicate line rows. Users can also directly modify quantities or remove items within the cart page.
• Real-time Order Total Calculation: Subtotals, taxes, free shipping thresholds (GHC50+), and overall order totals
dynamically recalculate whenever quantities change.
• Interactive Order Flow & Persistence: Integrated localStorage logic in [Link] so cart data persists
seamlessly between product pages, cart review, checkout, and receipt confirmation.
• Brand New High-Converting Success Page ([Link]): A sleek, modern post-checkout page that
confirms customer details, displays the delivery street address, calculates a 2–3 business day delivery window, and
provides a full printable order breakdown.
• Modernized Design & Styles: Refreshed CSS styling with cleaner typography, modern button aesthetics,
responsive container structures, and accessible status callouts.
1. Key Features & Implementation Overview
File Type Primary Enhancements & Modifications
Central store logic handling cart persistent state, quantity increments/decrements,
[Link] JAVASCRIPT item removal, cart total recalculations, order submission, and dynamic order
confirmation rendering.
Replaced static hardcoded HTML table with dynamic JavaScript rendering target
[Link] HTML5 (id="cart-table-body"), dynamic summary indicators, and clear quantity control
buttons.
Added quantity selector inputs directly onto product cards and wired up 'Add to Cart'
[Link] HTML5
triggers that talk to `[Link]`.
Updated checkout form to capture customer name, email, street address, and
[Link] HTML5 payment method, passing them smoothly to the dynamic success receipt upon
submission.
NEW PAGE: An attractive, modern order receipt card featuring order tracking
[Link] HTML5 badges, estimated arrival dates, customer delivery location details, and order item
breakdowns.
Enhanced overall UI, rounded corners, modern shadow overlays, badge tags, styled
[Link] CSS3
quantity inputs, and custom design rules for the success page visual elements.
2. Core Implementation Files
[Link] (New Dynamic Store & Cart Controller)
Page 1 of 13
// ==========================================================================
// Electronics Store JavaScript Engine ([Link])
// Handles Cart Persistence, Quantity Management, Totals, and Success Page
// ==========================================================================
// Get cart from LocalStorage or initialize empty array
function getCart() {
return [Link]([Link]('cart')) || [];
}
// Save cart back to LocalStorage
function saveCart(cart) {
[Link]('cart', [Link](cart));
updateCartBadge();
}
// Add item with specified quantity to cart
function addToCart(title, price, quantityId) {
const qtyInput = [Link](quantityId);
const qty = qtyInput ? parseInt([Link]) || 1 : 1;
let cart = getCart();
const existingIndex = [Link](item => [Link] === title);
if (existingIndex > -1) {
cart[existingIndex].quantity += qty;
} else {
[Link]({ title: title, price: parseFloat(price), quantity: qty });
}
saveCart(cart);
alert(`${qty}x "${title}" added to your shopping cart!`);
}
// Render dynamic cart table
function renderCart() {
const tableBody = [Link]('cart-table-body');
const totalDisplay = [Link]('cart-total-display');
const shippingDisplay = [Link]('shipping-status');
if (!tableBody) return;
let cart = getCart();
[Link] = '';
if ([Link] === 0) {
[Link] = 'Your cart is empty! Shop Now';
if (totalDisplay) [Link] = 'TOTAL: GHC 0.00';
if (shippingDisplay) [Link] = '';
return;
}
let grandTotal = 0;
[Link]((item, index) => {
const itemTotal = [Link] * [Link];
grandTotal += itemTotal;
const row = [Link]('tr');
[Link] = `
${[Link]}
GHC ${[Link](2)}
-
${[Link]}
Page 2 of 13
+
GHC ${[Link](2)}
Remove
`;
[Link](row);
});
if (totalDisplay) {
[Link] = `TOTAL: GHC ${[Link](2)}`;
}
if (shippingDisplay) {
if (grandTotal >= 50) {
[Link] = '🎉 You qualify for FREE SHIPPING!';
} else {
const remaining = (50 - grandTotal).toFixed(2);
[Link] = `Add GHC ${remaining} more for FREE shipping!`;
}
}
}
// Update quantity by increment (+1 or -1)
function updateQuantity(index, delta) {
let cart = getCart();
if (cart[index]) {
cart[index].quantity += delta;
if (cart[index].quantity <= 0) {
[Link](index, 1);
}
saveCart(cart);
renderCart();
}
}
// Remove single item from cart
function removeItem(index) {
let cart = getCart();
[Link](index, 1);
saveCart(cart);
renderCart();
}
// Navigation Cart Badge Counter
function updateCartBadge() {
const badge = [Link]('nav-cart-count');
if (!badge) return;
const cart = getCart();
const totalItems = [Link]((sum, item) => sum + [Link], 0);
[Link] = ` (${totalItems})`;
}
// Handle Order Form Submission
function handleFormSubmit(event) {
[Link]();
const form = [Link];
const formData = new FormData(form);
const orderDetails = {
orderNumber: 'ORD-' + [Link](100000 + [Link]() * 900000),
name: [Link]('name') || 'Valued Customer',
email: [Link]('email') || '',
address: [Link]('address') || 'Provided Shipping Address',
Page 3 of 13
payment: [Link]('pay') || 'Cash on Delivery',
items: getCart(),
date: new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
};
[Link]('lastOrder', [Link](orderDetails));
[Link]('cart'); // Clear cart after order placement
[Link] = '[Link]';
}
// Render dynamic elements on page load
[Link]('DOMContentLoaded', () => {
updateCartBadge();
renderCart();
renderSuccessPage();
});
// Render dynamic Success/Receipt page details
function renderSuccessPage() {
const successContainer = [Link]('success-details-container');
if (!successContainer) return;
const order = [Link]([Link]('lastOrder'));
if (!order) {
[Link] = '
No recent order found. Return to Shop
';
return;
}
let totalAmount = 0;
let itemsHtml = [Link](item => {
const itemTotal = [Link] * [Link];
totalAmount += itemTotal;
return `
${[Link]} x ${[Link]}
GHC ${[Link](2)}
`;
}).join('');
// Calculate estimated delivery date (3 days from today)
const deliveryDate = new Date();
[Link]([Link]() + 3);
const deliveryStr = [Link]('en-GB', { weekday: 'long', day: 'numeric', month:
'long', year: 'numeric' });
[Link]('order-id-tag').innerText = [Link];
[Link]('cust-name').innerText = [Link];
[Link]('cust-address').innerText = [Link];
[Link]('delivery-window').innerText = `3 Days (${deliveryStr})`;
[Link]('pay-method').innerText = [Link];
[Link]('order-items-table').innerHTML = itemsHtml;
[Link]('final-total').innerText = `GHC ${[Link](2)}`;
}
[Link] (Updated Home Page)
Page 4 of 13
<!DOCTYPE html>
<html>
<head>
<title>Jephthah's Awesome Electronics Shop!!!</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<h1>WELCOME TO MY GADGET STORE!</h1>
<div class="navbar">
<a href="[Link]">HOME</a> |
<a href="[Link]">MY CART <span id="nav-cart-count">(0)</span></a> |
<a href="[Link]">COOL VIDEOS</a> |
<a href="[Link]">PHOTOS</a> |
<a href="[Link]">SPECS TABLE</a> |
<a href="[Link]">BUY NOW!</a>
</div>
<div class="box">
<h2>Best Deals Today (Don't Miss Out!)</h2>
<h3 style="color: #059669; background: #ecfdf5; padding: 10px; border-radius: 5px; text-align: center;">
FREE SHIPPING ON ALL ORDERS OVER GHC50!!! HURRY!
</h3>
<div class="item">
<h3>Super Loud Headphones</h3>
<p>These headphones are super loud and work with Bluetooth. Very good quality!</p>
<p class="price">Price: GHC29.99</p>
<div class="add-cart-row">
<label>Quantity: </label>
<input type="number" id="qty-headphones" value="1" min="1" class="item-qty-input">
<button class="buy-btn" onclick="addToCart('Super Loud Headphones', 29.99, 'qty-headphones')">ADD TO
CART</button>
</div>
</div>
<div class="item">
<h3>Smart Watch Pro</h3>
<p>Tells the time, counts your steps, and has a cool red strap.</p>
<p class="price">Price: GHC49.99</p>
<div class="add-cart-row">
<label>Quantity: </label>
<input type="number" id="qty-watch" value="1" min="1" class="item-qty-input">
<button class="buy-btn" onclick="addToCart('Smart Watch Pro', 49.99, 'qty-watch')">ADD TO CART</button>
</div>
</div>
<div class="item">
<h3>Fast Gaming Laptop</h3>
<p>Has lots of RAM and plays games very fast without lagging.</p>
<p class="price">Price: GHC899.00</p>
<div class="add-cart-row">
<label>Quantity: </label>
<input type="number" id="qty-laptop" value="1" min="1" class="item-qty-input">
<button class="buy-btn" onclick="addToCart('Fast Gaming Laptop', 899.00, 'qty-laptop')">ADD TO CART</
button>
</div>
</div>
</div>
<footer>Created by A. Jephthah - 2026. Thanks for visiting my website!</footer>
</body>
</html>
Page 5 of 13
[Link] (Dynamic Shopping Cart Page)
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<h1>YOUR SHOPPING CART</h1>
<div class="navbar">
<a href="[Link]">HOME</a> |
<a href="[Link]">MY CART <span id="nav-cart-count">(0)</span></a> |
<a href="[Link]">COOL VIDEOS</a> |
<a href="[Link]">PHOTOS</a> |
<a href="[Link]">SPECS TABLE</a> |
<a href="[Link]">BUY NOW!</a>
</div>
<div class="box">
<h2>Items in Your Shopping Cart:</h2>
<table style="width:100%; border-collapse: collapse;">
<thead>
<tr style="background-color: orange; color: black;">
<th style="padding: 10px;">Item Name</th>
<th style="padding: 10px;">Unit Price</th>
<th style="padding: 10px;">Quantity Controls</th>
<th style="padding: 10px;">Subtotal</th>
<th style="padding: 10px;">Action</th>
</tr>
</thead>
<tbody id="cart-table-body">
<!-- Populated dynamically via [Link] -->
</tbody>
</table>
<div style="margin-top: 15px; text-align: right;">
<div id="shipping-status" style="margin-bottom: 5px; font-size: 14px;"></div>
<h3 id="cart-total-display" style="color: red; font-size: 24px; margin: 5px 0;">TOTAL: GHC 0.00</h3>
</div>
<br>
<div style="text-align: right;">
<a href="[Link]" style="margin-right: 15px; text-decoration: none; color: blue; font-weight:
bold;">« Continue Shopping</a>
<a href="[Link]"><button class="buy-btn" style="font-size: 20px; padding: 10px 20px;">PROCEED TO
CHECKOUT »</button></a>
</div>
</div>
<footer>Created by A. Jephthah - 2026. Thanks for visiting my website!</footer>
</body>
</html>
[Link] (Checkout Order Form)
Page 6 of 13
<!DOCTYPE html>
<html>
<head>
<title>Fill Order Form</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<h1>ORDER FILLING FORM</h1>
<div class="navbar">
<a href="[Link]">HOME</a> |
<a href="[Link]">MY CART <span id="nav-cart-count">(0)</span></a> |
<a href="[Link]">COOL VIDEOS</a> |
<a href="[Link]">PHOTOS</a> |
<a href="[Link]">SPECS TABLE</a> |
<a href="[Link]">BUY NOW!</a>
</div>
<div class="box">
<h2>Please fill in your details below to place order:</h2>
<form onsubmit="handleFormSubmit(event)">
<label style="font-weight: bold;">Your Full Name:</label><br>
<input type="text" name="name" required placeholder="e.g. Alex Mensah"><br>
<label style="font-weight: bold;">Your Email Address:</label><br>
<input type="email" name="email" required placeholder="e.g. alex@[Link]"><br>
<label style="font-weight: bold;">Home / Shipping Address:</label><br>
<textarea name="address" rows="4" required placeholder="Enter street name, house number, town, and
region..."></textarea><br>
<label style="font-weight: bold;">How will you pay?</label><br>
<select name="pay">
<option value="Cash on Delivery">Cash on Delivery</option>
<option value="Credit / Debit Card">Credit Card</option>
<option value="Mobile Money (MTN / Telecel / AT)">Mobile Money 💵 </option>
</select><br><br>
<input type="submit" value="SUBMIT ORDER NOW" class="buy-btn" style="width: 100%; font-size: 20px;
padding: 12px; cursor: pointer;">
</form>
</div>
<footer>Created by A. Jephthah - 2026. Thanks for visiting my website!</footer>
</body>
</html>
[Link] (Brand New Order Success & Receipt Page)
Page 7 of 13
<!DOCTYPE html>
<html>
<head>
<title>Order Successful! - Jephthah's Gadget Store</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>
<body>
<h1>THANK YOU FOR YOUR ORDER!</h1>
<div class="navbar">
<a href="[Link]">HOME</a> |
<a href="[Link]">MY CART <span id="nav-cart-count">(0)</span></a> |
<a href="[Link]">COOL VIDEOS</a> |
<a href="[Link]">PHOTOS</a> |
<a href="[Link]">SPECS TABLE</a> |
<a href="[Link]">BUY NOW!</a>
</div>
<div class="success-card">
<div class="success-icon">✔</div>
<h2 class="success-title">PURCHASE SUCCESSFUL!</h2>
<p class="success-subtitle">Your order has been confirmed and is currently being packed for delivery.</
p>
<div class="order-badge">Order Reference: <span id="order-id-tag">#ORD-XXXXXX</span></div>
<div id="success-details-container" class="order-details-grid">
<div class="detail-box">
<h4>📦 Delivery Destination</h4>
<p><strong style="color: #1e293b;">Customer:</strong> <span id="cust-name">Loading...</span></p>
<p><strong style="color: #1e293b;">Address:</strong> <span id="cust-address">Loading...</span></p>
<p><strong style="color: #1e293b;">Payment Method:</strong> <span id="pay-method">Loading...</
span></p>
</div>
<div class="detail-box highlight-box">
<h4>🚚 Estimated Delivery Timeframe</h4>
<div class="delivery-time" id="delivery-window">3 Business Days</div>
<p style="font-size: 13px; color: #475569; margin-top: 5px;">
Our courier will dispatch your parcel to the inputted address above. You will receive an SMS
updates on delivery day.
</p>
</div>
</div>
<h3 style="text-align: left; margin-top: 25px;">Order Summary Breakdown</h3>
<table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
<thead style="background: #f1f5f9;">
<tr>
<th style="text-align: left; padding: 10px; border-bottom: 2px solid #cbd5e1;">Purchased Item</
th>
<th style="text-align: right; padding: 10px; border-bottom: 2px solid #cbd5e1;">Price Total</th>
</tr>
</thead>
<tbody id="order-items-table">
<!-- Dynamic items -->
</tbody>
<tfoot>
<tr style="font-weight: bold; font-size: 16px; background: #f8fafc;">
<td style="padding: 12px; border-top: 2px solid #1e293b;">TOTAL PAID:</td>
<td id="final-total" style="text-align: right; padding: 12px; border-top: 2px solid #1e293b;
color: #059669;">GHC 0.00</td>
</tr>
Page 8 of 13
</tfoot>
</table>
<div style="margin-top: 30px; text-align: center;">
<button onclick="[Link]()" class="buy-btn" style="background-color: #2563eb; color: white;
border: none; padding: 10px 20px; border-radius: 4px; margin-right: 10px;">PRINT RECEIPT</button>
<a href="[Link]"><button class="buy-btn" style="padding: 10px 20px; border-radius: 4px;">BACK TO
STORE</button></a>
</div>
</div>
<footer>Created by A. Jephthah - 2026. Thanks for visiting my website!</footer>
</body>
</html>
[Link] (Updated Modernized CSS Stylesheet)
Page 9 of 13
/* ==========================================================================
My First Electronics Store ([Link] - Enhanced Edition)
Made by: Alex (Student ID: 4092) | Updated with Dynamic Cart & Order Success
========================================================================== */
body {
font-family: "Comic Sans MS", "Arial", sans-serif;
background-color: #fef08a;
color: black;
margin: 15px;
}
/* Header & Title */
h1 {
color: red;
text-align: center;
font-size: 36px;
background-color: cyan;
border: 5px dashed black;
padding: 10px;
margin-top: 0;
}
/* Navigation Links */
.navbar {
background-color: lime;
padding: 15px;
text-align: center;
border: 3px solid blue;
margin-bottom: 20px;
}
.navbar a {
color: blue;
font-weight: bold;
font-size: 18px;
margin: 0 10px;
text-decoration: underline;
}
.navbar a:hover {
background-color: orange;
color: white;
}
/* Page Containers */
.box {
background-color: white;
border: 4px solid red;
padding: 20px;
margin-bottom: 20px;
border-radius: 6px;
}
/* Product Styling */
.item {
border: 2px solid green;
background-color: #ffccff;
padding: 15px;
margin: 15px 0;
border-radius: 6px;
}
.item h3 {
color: purple;
Page 10 of 13
margin: 0 0 5px 0;
}
.price {
color: red;
font-size: 20px;
font-weight: bold;
margin: 5px 0 10px 0;
}
.add-cart-row {
margin-top: 10px;
display: block;
}
.item-qty-input {
width: 60px !important;
padding: 6px !important;
font-size: 16px;
text-align: center;
margin-right: 10px !important;
border: 2px solid black;
display: inline-block !important;
}
/* Buttons */
.buy-btn {
background-color: red;
color: yellow;
font-size: 16px;
font-weight: bold;
padding: 8px 16px;
border: 2px solid black;
cursor: pointer;
border-radius: 4px;
display: inline-block;
}
.buy-btn:hover {
background-color: darkred;
color: white;
}
.qty-btn {
background-color: #e2e8f0;
border: 1px solid #0f172a;
font-weight: bold;
width: 28px;
height: 28px;
cursor: pointer;
border-radius: 3px;
}
.qty-num {
font-weight: bold;
font-size: 16px;
padding: 0 8px;
}
.remove-btn {
background-color: #ef4444;
color: white;
border: 1px solid #b91c1c;
padding: 4px 8px;
cursor: pointer;
Page 11 of 13
border-radius: 3px;
font-weight: bold;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 2px solid black;
}
th {
background-color: orange;
color: black;
font-size: 16px;
}
td {
background-color: #ffffff;
padding: 10px;
}
/* Form Styling */
form {
background-color: #ffffcc;
padding: 20px;
border: 3px dotted purple;
border-radius: 6px;
}
input[type="text"], input[type="email"], select, textarea {
width: 100%;
padding: 8px;
margin: 5px 0 15px 0;
border: 2px solid black;
border-radius: 4px;
}
/* Attractive Success Page Styling */
.success-card {
background-color: #ffffff;
border: 4px solid #059669;
border-radius: 12px;
padding: 30px;
margin-bottom: 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
text-align: center;
}
.success-icon {
width: 70px;
height: 70px;
background-color: #10b981;
color: white;
font-size: 40px;
line-height: 70px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.success-title {
color: #047857;
Page 12 of 13
font-size: 28px;
margin: 0 0 5px 0;
}
.success-subtitle {
color: #4b5563;
font-size: 15px;
margin-bottom: 15px;
}
.order-badge {
display: inline-block;
background-color: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
padding: 6px 16px;
border-radius: 20px;
font-weight: bold;
font-size: 14px;
margin-bottom: 20px;
}
.order-details-grid {
text-align: left;
margin-top: 15px;
}
.detail-box {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.detail-box h4 {
margin: 0 0 10px 0;
color: #0f172a;
border-bottom: 1px solid #cbd5e1;
padding-bottom: 5px;
}
.highlight-box {
background-color: #eff6ff;
border-color: #bfdbfe;
}
.delivery-time {
font-size: 22px;
font-weight: bold;
color: #1d4ed8;
}
/* Footer */
footer {
text-align: center;
font-weight: bold;
margin-top: 30px;
color: darkblue;
}
Page 13 of 13