Skip to content

Instantly share code, notes, and snippets.

@egga22

egga22/index.html

Created March 27, 2024 20:59
Show Gist options
  • Save egga22/e3c691c1b7c87dab41d7d535e6645bd2 to your computer and use it in GitHub Desktop.
Save egga22/e3c691c1b7c87dab41d7d535e6645bd2 to your computer and use it in GitHub Desktop.
Download ZIP
LYvjBpY
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Shopping Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sort-options">
<select id="sortSelect" onchange="sortProducts(this.value)">
<option value="default">Default</option>
<option value="priceLowToHigh">Price: Low to High</option>
<option value="priceHighToLow">Price: High to Low</option>
<option value="alphabeticalAZ">Alphabetical: A-Z</option>
<option value="alphabeticalZA">Alphabetical: Z-A</option>
</select>
</div>
<div id="product-list">
<h2>Products</h2>
<div class="product">
<span class="name">Video Game</span>
<span class="price">$60</span>
<button onclick="addToCart('Video Game', 60)">Add to Cart</button>
</div>
<div class="product">
<span class="name">Gaming Console</span>
<span class="price">$500</span>
<button onclick="addToCart('Gaming Console', 500)">Add to Cart</button>
</div>
</div>
<div id="product-list">
<!-- Products will be rendered here by JavaScript -->
</div>
<div id="cart">
<h2>Cart</h2>
<div id="cart-items"></div>
<button onclick="checkout()">Checkout</button>
</div>
<div id="balance">
<h2>Balance: $<span id="balance-amount">100</span></h2>
<button onclick="addBalance()">Add to Balance</button>
</div>
<div id="purchase-history">
<h2>Purchase History</h2>
<div id="history-items"></div>
<button onclick="clearHistory()" class="clear-button">Clear History</button>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
let balance = 0;
let cart = [];
let purchaseHistory = [];
const products = [
{ name: 'Video Game', price: 60 },
{ name: 'PS5', price: 500 },
{ name: 'Ice Cream', price: 12 },
{ name: 'Movie Ticket', price: 14 },
{ name: 'Pair of Pants', price: 40 },
{ name: 'Nerf Gun', price: 25 },
{ name: 'Pokemon Card Pack', price: 15 },
{ name: 'Anime Convention Ticket', price: 150 },
{ name: 'Fancy Pencil Set', price: 25 },
{ name: 'Movie Ticket 3 Pack', price: 40 },
{ name: 'High End Skateboard', price: 100 },
{ name: '$5 Roblox Gift Card', price: 5 },
{ name: '$10 Roblox Gift Card', price: 10 },
{ name: '$20 Roblox Gift Card', price: 20 },
{ name: 'Nike Shoes', price: 120 },
{ name: 'Lego Set', price: 80 },
{ name: 'Poster', price: 20 },
{ name: 'Music Album', price: 10 },
{ name: '3 Pizzas', price: 40 },
{ name: 'Anime Tee Shirt', price: 70 }
];
function addToCart(productName, price) {
cart.push({productName, price});
renderCartItems();
}
function renderCartItems() {
const cartItemsEl = document.getElementById('cart-items');
cartItemsEl.innerHTML = ''; // Clear current items
cart.forEach(item => {
const itemEl = document.createElement('div');
itemEl.textContent = `${item.productName} - $${item.price}`;
cartItemsEl.appendChild(itemEl);
});
}
function checkout() {
const total = cart.reduce((acc, item) => acc + item.price, 0);
if (total > balance) {
alert(`Insufficient balance. You need $${total - balance} more.`);
} else {
balance -= total;
purchaseHistory.push(...cart);
cart = []; // Clear the cart
alert('Purchase successful!');
updateBalanceDisplay();
renderCartItems();
renderPurchaseHistory();
}
}
function addBalance() {
const amount = prompt('How much would you like to add?');
if (amount) {
balance += parseInt(amount, 10);
updateBalanceDisplay();
}
}
function updateBalanceDisplay() {
document.getElementById('balance-amount').textContent = balance;
}
function renderPurchaseHistory() {
const historyItemsEl = document.getElementById('history-items');
historyItemsEl.innerHTML = ''; // Clear current items
purchaseHistory.forEach(item => {
const itemEl = document.createElement('div');
itemEl.textContent = `${item.productName} - $${item.price}`;
historyItemsEl.appendChild(itemEl);
});
}
function clearHistory() {
purchaseHistory = [];
renderPurchaseHistory();
}
function renderProducts() {
const productListEl = document.getElementById('product-list');
productListEl.innerHTML = '<h2>Products</h2>'; // Clear existing items and add heading
products.forEach(product => {
const productEl = document.createElement('div');
productEl.className = 'product';
productEl.innerHTML = `
<span class="name">${product.name}</span>
<span class="price">$${product.price}</span>
<button onclick="addToCart('${product.name}', ${product.price})">Add to Cart</button>
`;
productListEl.appendChild(productEl);
});
}
function sortProducts(sortMethod) {
switch (sortMethod) {
case 'priceLowToHigh':
products.sort((a, b) => a.price - b.price);
break;
case 'priceHighToLow':
products.sort((a, b) => b.price - a.price);
break;
case 'alphabeticalAZ':
products.sort((a, b) => a.name.localeCompare(b.name));
break;
case 'alphabeticalZA':
products.sort((a, b) => b.name.localeCompare(a.name));
break;
case 'default':
default:
// Reset to default order if needed. Implement as per your logic.
// This could be resetting to an initially stored default array or simply doing nothing
// if you always load your products in the default order anyway.
break;
}
renderProducts();
}
function renderProducts() {
const productListEl = document.getElementById('product-list');
productListEl.innerHTML = ''; // Clear existing items
products.forEach(product => {
const productEl = document.createElement('div');
productEl.className = 'product';
productEl.innerHTML = `
<span class="name">${product.name}</span>
<span class="price">$${product.price}</span>
<button onclick="addToCart('${product.name}', ${product.price})">Add to Cart</button>
`;
productListEl.appendChild(productEl);
});
}
renderProducts();
updateBalanceDisplay();
Raw
style.css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 10px;
}
h2 {
color: #333;
}
#product-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
.product {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.product .name {
font-size: 18px;
color: #333;
}
.product .price {
font-size: 16px;
color: #666;
}
button {
background-color: #0066ff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056e8;
}
#cart, #balance, #purchase-history {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 20px;
border: 1px solid #ddd;
}
#cart {
position: fixed;
right: 20px;
top: 20px;
width: 300px;
}
#balance {
position: fixed;
right: 20px;
bottom: 20px;
width: 200px;
text-align: center;
}
#purchase-history {
position: fixed;
left: 20px;
bottom: 20px;
width: 300px;
}
#cart-items div, #history-items div {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.clear-button {
background-color: #ff4444;
}
.clear-button:hover {
background-color: #cc0000;
}
/* Base styles above */
/* Responsive adjustments */
@media (max-width: 768px) {
#product-list {
grid-template-columns: 1fr; /* Stack products vertically */
}
#cart, #balance, #purchase-history {
position: static; /* Remove fixed positioning on smaller screens */
width: auto; /* Allow boxes to expand to the width of the screen */
margin-bottom: 20px; /* Add space between sections */
}
button {
width: 100%; /* Make buttons full width */
box-sizing: border-box; /* Ensure padding and border are included in the width */
margin-top: 10px; /* Add space between buttons and other elements */
}
.product {
display: flex;
flex-direction: column; /* Stack product info vertically */
}
.product button {
margin-top: 10px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment