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

تعلم كيفية استخدام دوال 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);
}