الهدف التعليمي

تعلم كيفية إدارة قائمة المنتجات مع إمكانيات الحذف والتعديل باستخدام 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();
}