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

تعلم كيفية إنشاء قائمة منتجات تفاعلية مع فلترة ديناميكية باستخدام JavaScript، مع تطبيق مبادئ تصميم الويب الحديثة.

قائمة المنتجات

الشرح البرمجي
// بيانات المنتجات الأولية
const products = [
    { name: "منتج 1", price: 50 },
    { name: "منتج 2", price: 150 },
    { name: "منتج 3", price: 80 },
    { name: "منتج 4", price: 200 },
];

// عرض المنتجات
function displayProducts(filteredProducts) {
    const container = document.getElementById("productContainer");
    container.innerHTML = "";
    
    if (filteredProducts.length === 0) {
        container.innerHTML = `<p class="error">لا توجد منتجات مطابقة</p>`;
        return;
    }
    
    filteredProducts.forEach(product => {
        const div = document.createElement("div");
        div.className = "product";
        div.innerHTML = `
            <h3>${product.name}</h3>
            <p>السعر: ${product.price} جنيه</p>
        `;
        container.appendChild(div);
    });
}