Untitled

async function listProducts() {


    let urunler = await fetchProducts();


    let urunlerContainer = ``;

    for (let i = 0; i < urunler.length; i++) {
        urunlerContainer += `
        <div class="product relative border-2 h-[530px] max-w-[400px]">
            <div class="product__top flex justify-center border-b">
                <img id="product_image" src="${urunler[i].thumbnail}">
            </div>
            <div class="product__detail">
                <div class="flex items-center justify-between px-8">
                    <h2 id="product_title" class="font-bold my-2 text-gray-800 text-center text-2xl">${urunler[i].title}</h2>
                    <span id="product_price" class="font-bold">${urunler[i].price} $</span>
                </div>
                <p id="product_desc" class="text-sm px-5 text-center">${urunler[i].description}</p>
                <div class="flex items-center justify-center px-6 pb-2 absolute bottom-2 left-0 right-0">
                    <button id="${urunler[i].id}" onclick="sepeteEkle(this)" class="hover:bg-gray-600 bg-[#134B70] text-white w-full py-2 mt-3 rounded-xl">Sepete Ekle</button>
                </div>
            </div>
        </div>
        `
    }


    // GET, POST, PUT, DELETE

    document.getElementById('products').innerHTML = urunlerContainer;
}