[javascript] product maintaince

Viewer

copydownloadembedprintName: product maintaince
  1. document.write('<!DOCTYPE html>');
  2. document.write('<html lang="en">');
  3. document.write('<head>');
  4. document.write('    <meta charset="UTF-8">');
  5. document.write('    <meta name="viewport" content="width=device-width, initial-scale=1.0">');
  6. document.write('    <title>Product Maintenance</title>');
  7. document.write('</head>');
  8. document.write('<body>');
  9. document.write('');
  10. document.write('    <h1>Product Maintenance</h1>');
  11. document.write('');
  12. document.write('    <div id="product-list">');
  13. document.write('        <!-- Product list will be displayed here -->');
  14. document.write('    </div>');
  15. document.write('');
  16. document.write('    <h2>Add Product</h2>');
  17. document.write('    <form id="add-product-form">');
  18. document.write('        <label for="productName">Product Name:</label>');
  19. document.write('        <input type="text" id="productName" required>');
  20. document.write('        <label for="productPrice">Product Price:</label>');
  21. document.write('        <input type="number" id="productPrice" required>');
  22. document.write('        <button type="button" onclick="addProduct()">Add Product</button>');
  23. document.write('    </form>');
  24. document.write('');
  25. document.write('    <script>');
  26. document.write('        // Sample product data');
  27. document.write('        let products = [');
  28. document.write('            { id: 1, name: \'Product 1\', price: 20.99 },');
  29. document.write('            { id: 2, name: \'Product 2\', price: 30.49 }');
  30. document.write('        ];');
  31. document.write('');
  32. document.write('        // Function to display products');
  33. document.write('        function displayProducts() {');
  34. document.write('            const productListDiv = document.getElementById(\'product-list\');');
  35. document.write('            productListDiv.innerHTML = \'\';');
  36. document.write('');
  37. document.write('            products.forEach(product => {');
  38. document.write('                const productDiv = document.createElement(\'div\');');
  39. document.write('                productDiv.innerHTML = `<strong>${product.name}</strong> - $${product.price.toFixed(2)} ');
  40. document.write('                                        <button onclick="editProduct(${product.id})">Edit</button>');
  41. document.write('                                        <button onclick="deleteProduct(${product.id})">Delete</button>`;');
  42. document.write('                productListDiv.appendChild(productDiv);');
  43. document.write('            });');
  44. document.write('        }');
  45. document.write('');
  46. document.write('        // Function to add a new product');
  47. document.write('        function addProduct() {');
  48. document.write('            const productName = document.getElementById(\'productName\').value;');
  49. document.write('            const productPrice = parseFloat(document.getElementById(\'productPrice\').value);');
  50. document.write('');
  51. document.write('            if (productName && !isNaN(productPrice)) {');
  52. document.write('                const newProduct = {');
  53. document.write('                    id: products.length + 1,');
  54. document.write('                    name: productName,');
  55. document.write('                    price: productPrice');
  56. document.write('                };');
  57. document.write('');
  58. document.write('                products.push(newProduct);');
  59. document.write('                displayProducts();');
  60. document.write('            } else {');
  61. document.write('                alert(\'Please enter valid product information.\');');
  62. document.write('            }');
  63. document.write('        }');
  64. document.write('');
  65. document.write('        // Function to delete a product');
  66. document.write('        function deleteProduct(productId) {');
  67. document.write('            products = products.filter(product => product.id !== productId);');
  68. document.write('            displayProducts();');
  69. document.write('        }');
  70. document.write('');
  71. document.write('        // Function to edit a product (in this example, just delete and re-add)');
  72. document.write('        function editProduct(productId) {');
  73. document.write('            deleteProduct(productId);');
  74. document.write('            // Implement your edit logic here');
  75. document.write('        }');
  76. document.write('');
  77. document.write('        // Initial display');
  78. document.write('        displayProducts();');
  79. document.write('    </script>');
  80. document.write('</body>');
  81. document.write('</html>');
  82. document.write('');
  83.  

Editor

You can edit this paste and save as new:


File Description
  • product maintaince
  • Paste Code
  • 11 Dec-2023
  • 4.31 Kb
You can Share it: