marquez.juan/clase-10-ejercicios-de-repaso
1
0
Fork 7
Code Issues Pull Requests 4 Projects Releases Wiki Activity

feat: implement product listing and shopping cart functionality

Browse Source
This commit is contained in:
Facundo Saucedo
2026-05-25 13:03:03 -03:00
parent 894fbf39d3
commit 641cbf7a73
2 changed files with 73 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
ejercicio8/ejercicio8.js
View File

@@ -1 +1,68 @@
// Agregar aquí el código javascript // Agregar aquí el código javascript
const products = [
{ name: "Teclado", price: 8500 },
{ name: "Mouse", price: 4200 },
{ name: "Monitor", price: 62000 },
{ name: "Auriculares", price: 11000 },
{ name: "Webcam", price: 15500 }
];
const productList = document.getElementById('productList');
const checkout = document.getElementById('checkout');
products.forEach(product => {
const productDiv = document.createElement('div');
productDiv.textContent = `${product.name} - $${product.price} `;
const buyButton = document.createElement('button');
buyButton.textContent = 'Comprar';
productDiv.appendChild(buyButton);
productList.appendChild(productDiv);
});
const cart = new Map();
const renderCart = () => {
checkout.innerHTML = '';
if (cart.size === 0) {
checkout.innerHTML = '<p>Carrito vacío</p>';
return;
}
let totalPrice = 0;
cart.forEach((quantity, product) => {
const lineTotal = product.price * quantity;
totalPrice += lineTotal;
const itemRow = document.createElement('div');
itemRow.innerHTML = `
<div>${product.name} -------- x${quantity}</div>
<div>$${lineTotal.toLocaleString()}</div>
`;
checkout.appendChild(itemRow);
});
const totalRow = document.createElement('div');
totalRow.innerHTML = `<strong>Total: ------------- $${totalPrice.toLocaleString()}</strong>`;
checkout.appendChild(totalRow);
};
productList.addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
const productDiv = event.target.parentElement;
const productName = productDiv.textContent.split(' - ')[0];
const product = products.find(p => p.name === productName);
if (!product) {
return;
}
const currentQty = cart.get(product) || 0;
cart.set(product, currentQty + 1);
renderCart();
}
});
renderCart();

7
ejercicio8/index.html
View File

@@ -8,7 +8,12 @@
</head> </head>
<body> <body>
<h1>Ejercicio 8</h1> <h1>Ejercicio 8</h1>
<div id="productList">
<!-- Acá se mostrarán los productos -->
</div>
<div id="checkout">
<!-- Acá se mostrará el precio total -->
</div>
<script src="ejercicio8.js"></script> <script src="ejercicio8.js"></script>
</body> </body>
</html> </html>