تعلم كيفية استخدام دوال map و filter في JavaScript لمعالجة وعرض قائمة المنتجات بشكل تفاعلي.
// بيانات المنتجات
const products = [
{ name: "منتج 1", price: 50 },
{ name: "منتج 2", price: 120 },
{ name: "منتج 3", price: 200 },
{ name: "منتج 4", price: 75 },
];
// حساب الأسعار النهائية مع الضريبة
function calculateFinalPrices() {
return products.map(product => ({
...product,
finalPrice: product.price + product.price * 0.14
}));
}
// عرض المنتجات
function displayProducts(filteredProducts) {
const container = document.getElementById("productContainer");
container.innerHTML = "";
filteredProducts.forEach(product => {
const productDiv = document.createElement("div");
productDiv.className = "product";
productDiv.innerHTML = `
<h3>${product.name}</h3>
<p>السعر الأصلي: ${product.price} جنيه</p>
<p>السعر بعد الضريبة: ${product.finalPrice.toFixed(2)} جنيه</p>
`;
container.appendChild(productDiv);
});
}
// فلترة المنتجات الأعلى من 100 جنيه
function filterExpensiveProducts() {
const filtered = calculateFinalPrices().filter(product => product.finalPrice > 100);
displayProducts(filtered);
}