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