[javascript] product maintaince
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
- document.write('<!DOCTYPE html>');
- document.write('<html lang="en">');
- document.write('<head>');
- document.write(' <meta charset="UTF-8">');
- document.write(' <meta name="viewport" content="width=device-width, initial-scale=1.0">');
- document.write(' <title>Product Maintenance</title>');
- document.write('</head>');
- document.write('<body>');
- document.write('');
- document.write(' <h1>Product Maintenance</h1>');
- document.write('');
- document.write(' <div id="product-list">');
- document.write(' <!-- Product list will be displayed here -->');
- document.write(' </div>');
- document.write('');
- document.write(' <h2>Add Product</h2>');
- document.write(' <form id="add-product-form">');
- document.write(' <label for="productName">Product Name:</label>');
- document.write(' <input type="text" id="productName" required>');
- document.write(' <label for="productPrice">Product Price:</label>');
- document.write(' <input type="number" id="productPrice" required>');
- document.write(' <button type="button" onclick="addProduct()">Add Product</button>');
- document.write(' </form>');
- document.write('');
- document.write(' <script>');
- document.write(' // Sample product data');
- document.write(' let products = [');
- document.write(' { id: 1, name: \'Product 1\', price: 20.99 },');
- document.write(' { id: 2, name: \'Product 2\', price: 30.49 }');
- document.write(' ];');
- document.write('');
- document.write(' // Function to display products');
- document.write(' function displayProducts() {');
- document.write(' const productListDiv = document.getElementById(\'product-list\');');
- document.write(' productListDiv.innerHTML = \'\';');
- document.write('');
- document.write(' products.forEach(product => {');
- document.write(' const productDiv = document.createElement(\'div\');');
- document.write(' productDiv.innerHTML = `<strong>${product.name}</strong> - $${product.price.toFixed(2)} ');
- document.write(' <button onclick="editProduct(${product.id})">Edit</button>');
- document.write(' <button onclick="deleteProduct(${product.id})">Delete</button>`;');
- document.write(' productListDiv.appendChild(productDiv);');
- document.write(' });');
- document.write(' }');
- document.write('');
- document.write(' // Function to add a new product');
- document.write(' function addProduct() {');
- document.write(' const productName = document.getElementById(\'productName\').value;');
- document.write(' const productPrice = parseFloat(document.getElementById(\'productPrice\').value);');
- document.write('');
- document.write(' if (productName && !isNaN(productPrice)) {');
- document.write(' const newProduct = {');
- document.write(' id: products.length + 1,');
- document.write(' name: productName,');
- document.write(' price: productPrice');
- document.write(' };');
- document.write('');
- document.write(' products.push(newProduct);');
- document.write(' displayProducts();');
- document.write(' } else {');
- document.write(' alert(\'Please enter valid product information.\');');
- document.write(' }');
- document.write(' }');
- document.write('');
- document.write(' // Function to delete a product');
- document.write(' function deleteProduct(productId) {');
- document.write(' products = products.filter(product => product.id !== productId);');
- document.write(' displayProducts();');
- document.write(' }');
- document.write('');
- document.write(' // Function to edit a product (in this example, just delete and re-add)');
- document.write(' function editProduct(productId) {');
- document.write(' deleteProduct(productId);');
- document.write(' // Implement your edit logic here');
- document.write(' }');
- document.write('');
- document.write(' // Initial display');
- document.write(' displayProducts();');
- document.write(' </script>');
- document.write('</body>');
- document.write('</html>');
- document.write('');
Editor
You can edit this paste and save as new: