Scribd
Upload
12 views5 pages

Cs311 Assignment Solution 2 by the Lost (2025)

This document contains an HTML solution for a Product Management system, including a form to add and delete products and a table to display them. It utilizes JavaScript to handle XML data for product information and includes styling for a user-friendly interface. The code ensures that product IDs are unique and provides alerts for user input validation.

Uploaded by

az7168852
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views5 pages

Cs311 Assignment Solution 2 by the Lost (2025)

This document contains an HTML solution for a Product Management system, including a form to add and delete products and a table to display them. It utilizes JavaScript to handle XML data for product information and includes styling for a user-friendly interface. The code ensures that product IDs are unique and provides alerts for user input validation.

Uploaded by

az7168852
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Student ID: BC220205826

Subject: Cs311
Assignment No: 2

HTML Solution Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Management</title>
<style>
body {
margin: 20px;
font-family: Arial, sans-serif;
}

table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

.form-container {
margin-bottom: 20px;
}

.form-container input {
margin: 5px;
padding: 5px;
}

button {
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>

<h2>Product Management</h2>

<div class="form-container">
<input type="text" id="newId" placeholder="Product ID">
<input type="text" id="newName" placeholder="Product Name">
<input type="text" id="newCategory" placeholder="Category">
<input type="number" id="newPrice" placeholder="Price">
<button onclick="addProduct()">Add Product</button>
</div>

<div class="form-container">
<input type="text" id="deleteId" placeholder="Product ID to Delete">
<button onclick="deleteProduct()">Delete Product</button>
</div>

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody id="productTableBody">
</tbody>
</table>

<script>
let xmlDoc;

// Load XML file


function loadXMLDoc() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "products.xml", true); // Make sure the XML file is named
correctly and in the same folder

xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
xmlDoc = xhr.responseXML;
displayProducts();
}
};

xhr.send();
}

// Display all products


function displayProducts() {
const products = xmlDoc.getElementsByTagName("Product");
const tableBody = document.getElementById("productTableBody");
tableBody.innerHTML = "";

for (let i = 0; i < products.length; i++) {


const id = products[i].getElementsByTagName("ID")[0].textContent;
const name = products[i].getElementsByTagName("Name")[0].textContent;
const category = products[i].getElementsByTagName("Category")
[0].textContent;
const price = products[i].getElementsByTagName("Price")[0].textContent;

const row = document.createElement("tr");


row.innerHTML = `
<td>${id}</td>
<td>${name}</td>
<td>${category}</td>
<td>${parseFloat(price).toFixed(2)}</td>
`;
tableBody.appendChild(row);
}
}

// Add new product


function addProduct() {
const id = document.getElementById("newId").value;
const name = document.getElementById("newName").value;
const category = document.getElementById("newCategory").value;
const price = document.getElementById("newPrice").value;

if (!id || !name || !category || !price) {


alert("Please fill all fields");
return;
}

const products = xmlDoc.getElementsByTagName("Product");


for (let i = 0; i < products.length; i++) {
if (products[i].getElementsByTagName("ID")[0].textContent === id) {
alert("Product ID already exists");
return;
}
}

const newProduct = xmlDoc.createElement("Product");

const idElement = xmlDoc.createElement("ID");


idElement.textContent = id;
newProduct.appendChild(idElement);

const nameElement = xmlDoc.createElement("Name");


nameElement.textContent = name;
newProduct.appendChild(nameElement);

const categoryElement = xmlDoc.createElement("Category");


categoryElement.textContent = category;
newProduct.appendChild(categoryElement);

const priceElement = xmlDoc.createElement("Price");


priceElement.textContent = price;
newProduct.appendChild(priceElement);

xmlDoc.documentElement.appendChild(newProduct);

// Clear form
document.getElementById("newId").value = "";
document.getElementById("newName").value = "";
document.getElementById("newCategory").value = "";
document.getElementById("newPrice").value = "";

displayProducts();
}

// Delete product
function deleteProduct() {
const id = document.getElementById("deleteId").value;
if (!id) {
alert("Please enter a product ID");
return;
}

const products = xmlDoc.getElementsByTagName("Product");


let found = false;

for (let i = 0; i < products.length; i++) {


if (products[i].getElementsByTagName("ID")[0].textContent === id) {
xmlDoc.documentElement.removeChild(products[i]);
found = true;
break;
}
}

if (!found) {
alert("Product ID not found");
} else {
document.getElementById("deleteId").value = "";
displayProducts();
}
}

// Load XML on page load


window.onload = loadXMLDoc;
</script>
</body>
</html>

You might also like