Code source supermark
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pantalla de Cajero</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.product-list, .cart-list, .custom-product-form, .code-redeem-form {
margin-bottom: 30px;
}
.product-item, .cart-item {
margin: 10px 0;
}
.total {
font-size: 1.5em;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Pantalla de Cajero</h1>
<!-- Lista de productos disponibles -->
<div class="product-list">
<h2>Productos Disponibles</h2>
<div class="product-item">
<span>Producto 1 - $10</span>
<button onclick="addToCart('Producto 1', 10)">Agregar</button>
</div>
<div class="product-item">
<span>Producto 2 - $20</span>
<button onclick="addToCart('Producto 2', 20)">Agregar</button>
</div>
<!-- Agrega más productos aquí -->
</div>
<!-- Carrito de compras -->
<div class="cart-list">
<h2>Carrito</h2>
<div id="cart-items"></div>
<div class="total">Total: $<span id="total-price">0</span></div>
</div>
<!-- Formulario para crear productos personalizados -->
<div class="custom-product-form">
<h2>Crear Producto Personalizado</h2>
<label for="custom-name">Nombre:</label>
<input type="text" id="custom-name">
<label for="custom-price">Precio:</label>
<input type="number" id="custom-price">
<button onclick="createCustomProduct()">Crear</button>
</div>
<!-- Formulario para canjear código -->
<div class="code-redeem-form">
<h2>Canjear Código</h2>
<label for="redeem-code">Código:</label>
<input type="text" id="redeem-code">
<button onclick="redeemCode()">Canjear</button>
</div>
<script>
// Carrito de compras
let cart = [];
let totalPrice = 0;
function addToCart(name, price) {
cart.push({ name, price });
totalPrice += price;
updateCart();
}
function removeFromCart(index) {
totalPrice -= cart[index].price;
cart.splice(index, 1);
updateCart();
}
function updateCart() {
const cartItems = document.getElementById('cart-items');
cartItems.innerHTML = '';
cart.forEach((item, index) => {
cartItems.innerHTML += `
<div class="cart-item">
<span>${item.name} - $</span>
<input type="number" value="${item.price}" min="0"
onchange="updatePrice(${index}, this.value)">
<button onclick="removeFromCart(${index})">Quitar</button>
</div>
`;
});
document.getElementById('total-price').innerText = totalPrice.toFixed(2);
}
function updatePrice(index, newPrice) {
newPrice = parseFloat(newPrice);
if (!isNaN(newPrice) && newPrice >= 0) {
totalPrice -= cart[index].price;
cart[index].price = newPrice;
totalPrice += newPrice;
updateCart();
}
}
// Crear producto personalizado
function createCustomProduct() {
const name = document.getElementById('custom-name').value;
const price = parseFloat(document.getElementById('custom-price').value);
if (name && !isNaN(price)) {
addToCart(name, price);
}
}
// Canjear código
const validCodes = {
'DESCUENTO10': 10, // $10 de descuento
'PRODUCTOGRATIS': 100 // $100 de descuento (puede ser igual al precio de un producto gratis)
};
function redeemCode() {
const code = document.getElementById('redeem-code').value.toUpperCase();
if (validCodes[code]) {
totalPrice -= validCodes[code];
if (totalPrice < 0) totalPrice = 0; // Evitar que el total sea negativo
updateCart();
alert(`Código ${code} aplicado!`);
} else {
alert('Código inválido');
}
}
</script>
</body>
</html>
Comentarios
Publicar un comentario