// Product Constructor function Product(name, price, year) { this.name = name; this.price = price; this.year = year; }
// UI Constructor function UI() {}
UI.prototype.addProduct = function(product) {
const productList = document.getElementById('product-list');
const row = document.createElement('div');
row.innerHTML = ${product.name} ${product.price} ${product.year} <a href="#" class="delete">Delete</a>
;
productList.appendChild(row);
}
UI.prototype.resetForm = function () { document.getElementById('product-form').reset(); }
UI.prototype.showMessage = function (message, cssClass) {
const div = document.createElement('div');
div.className = alert alert-${cssClass}
;
div.appendChild(document.createTextNode(message));
// Show in The DOM
const app = document.querySelector('#App');
const form = document.querySelector('#product-form');
// Insert Message in the UI
app.insertBefore(div, form);
// Remove the Message after 3 seconds
setTimeout(function() {
document.querySelector('.alert').remove();
}, 3000);
}
UI.prototype.deleteProduct = function(element) { if(element.className === 'delete') { element.parentElement.remove(); } }
// 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 === '') {
ui.showMessage('Please Insert data in all fields', 'danger');
}
// Save Product
ui.addProduct(product);
ui.showMessage('Product Added Successfully', 'success');
ui.resetForm();
e.preventDefault();
});
document.getElementById('product-list') .addEventListener('click', function(e) { const ui = new UI(); ui.deleteProduct(e.target); ui.showMessage('Product Deleted Succsssfully', 'success'); e.preventDefault(); });