Aplicacion de productos

Agrega tu producto

// Product Constructor class Product { constructor(nombre, precio, año) { this.nombre = nombre; this.precio = precio; this.año = año; } } // UI Constructor class UI { addProduct(producto) { const productList = document.getElementById('product-list'); const element = document.createElement('div'); element.innerHTML = `

Producto: ${producto.nombre} - Precio: ${producto.precio} - año: ${producto.año} Eliminar

`; productList.appendChild(element); } resetForm() { document.getElementById('product-form').reset(); } deleteProduct(element) { if (element.name === 'Eliminar') { element.parentElement.parentElement.remove(); this.showMessage('Producto eliminado correctamente', 'info'); } } showMessage(message, cssClass) { const div = document.createElement('div'); div.className = `alert alert-${cssClass} mt-2`; div.appendChild(document.createTextNode(message)); // Show in The DOM const container = document.querySelector('.container'); const app = document.querySelector('#App'); // Insert Message in the UI container.insertBefore(div, app); // Remove the Message after 3 seconds setTimeout(function () { document.querySelector('.alert').remove(); }, 5000); } } // DOM Events document.getElementById('product-form') .addEventListener('submit', function (e) { const name = document.getElementById('name').value, price = document.getElementById('price').value, year = document.getElementById('year').value; // Create a new Oject Product const product = new Product(name, price, year); // Create a new UI const ui = new UI(); // Input User Validation if (name === '' || price === '' || year === '') { return ui.showMessage('Por favor complete los datos', 'danger'); } // Save Product ui.addProduct(product); ui.showMessage('Producto agregado correctamente', 'success'); ui.resetForm(); e.preventDefault(); }); document.getElementById('product-list') .addEventListener('click', function (e) { const ui = new UI(); ui.deleteProduct(e.target); e.preventDefault(); });