تعلم كيفية إدارة قائمة المنتجات مع إمكانيات الحذف والتعديل باستخدام JavaScript.
// بيانات المنتجات الأولية
const products = [
{ name: "لابتوب", price: 15000, description: "لابتوب عالي الأداء للألعاب والبرمجة" },
{ name: "هاتف", price: 8000, description: "هاتف ذكي مع شاشة AMOLED" },
{ name: "سماعات", price: 500, description: "سماعات أذن عالية الجودة" }
];
// عرض المنتجات
function renderProducts() {
const productList = document.getElementById("productList");
productList.innerHTML = "";
if (products.length === 0) {
productList.innerHTML = "<p class='empty-state'>لا توجد منتجات لعرضها.</p>";
return;
}
products.forEach((product, index) => {
const productDiv = document.createElement("div");
productDiv.className = "product";
productDiv.innerHTML = `
<div class="product-info">
<h3>${product.name}</h3>
<p>السعر: ${product.price} جنيه</p>
<p>${product.description}</p>
</div>
<div class="product-actions">
<button class="delete-btn" onclick="deleteProduct(${index})">حذف</button>
<button class="edit-btn" onclick="editProduct(${index})">تعديل</button>
</div>
`;
productList.appendChild(productDiv);
});
}
// حذف منتج
function deleteProduct(index) {
if (confirm("هل أنت متأكد أنك تريد حذف هذا المنتج؟")) {
products.splice(index, 1);
renderProducts();
}
}
// تعديل منتج
function editProduct(index) {
const newName = prompt("أدخل الاسم الجديد:", products[index].name);
const newPrice = prompt("أدخل السعر الجديد:", products[index].price);
const newDescription = prompt("أدخل الوصف الجديد:", products[index].description);
if (newName && newName.trim()) products[index].name = newName.trim();
if (newPrice && !isNaN(newPrice)) products[index].price = parseFloat(newPrice);
if (newDescription && newDescription.trim()) products[index].description = newDescription.trim();
renderProducts();
}