Product List get api for js filter-دریافت لیست محصولات از api و نمایش فیلتر و صفحه بندی

let products = [];
        let currentPage = 1;
        const itemsPerPage = 6; // تعداد محصولات در هر صفحه

// فراخوانی API برای گرفتن لیست محصولات
        fetch('https://fakestoreapi.com/products')
            .then(res => res.json())
            .then(data => {
                products = data;
                displayProducts(products, currentPage);
                setupPagination(products);
            });

// تابع نمایش محصولات
        function displayProducts(products, page) {
            const productList = document.getElementById('product-list');
            productList.innerHTML = ''; // پاک کردن محصولات فعلی
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const paginatedItems = products.slice(start, end); // محصولات هر صفحه

paginatedItems.forEach(product => {
                const productCard = `
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <img src="${product.image}" class="card-img-top" alt="${product.title}">
                            <div class="card-body">
                                <h5 class="card-title">${product.title}</h5>
                                <p class="card-text">${product.description.substring(0, 100)}...</p>
                                <p class="card-text"><strong>Price: $${product.price}</strong></p>
                                <a href="#" class="btn btn-primary">Buy Now</a>
                            </div>
                        </div>
                    </div>
                `;
                productList.innerHTML += productCard;
            });
        }

// تنظیم لینک‌های صفحه‌بندی
        function setupPagination(products) {
            const pagination = document.getElementById('pagination');
            const pageCount = Math.ceil(products.length / itemsPerPage);
            pagination.innerHTML = '';

for (let i = 1; i <= pageCount; i++) {
                const li = document.createElement('li');
                li.classList.add('page-item');
                
                if (i === currentPage) {
                    li.classList.add('active'); // صفحه فعلی را برجسته می‌کند
                }

li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
                li.addEventListener('click', function() {
                    currentPage = i;
                    displayProducts(products, currentPage);
                    setupPagination(products);
                });
                pagination.appendChild(li);
            }
        }

// تابع جستجو بر اساس عنوان
        document.getElementById('search').addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const filteredProducts = products.filter(product =>
                product.title.toLowerCase().includes(searchTerm)
            );
            currentPage = 1; // بازگشت به صفحه اول پس از جستجو
            displayProducts(filteredProducts, currentPage);
            setupPagination(filteredProducts);
        });

CSS

Html