Product Listing using JavaScript API

This mini project is developed using HTML, CSS, and JavaScript. It fetches product details from the DummyJSON API (https://dummyjson.com/products?limit=200) using the Fetch API.

The project dynamically displays up to 200 products on the webpage, including their product images, brand names, descriptions, and prices. Each product is displayed in a separate card with an Add to Cart button.

Key Features:

• Fetches product data from an external API.

• Uses JavaScript DOM manipulation to create product cards dynamically.

• Displays product images, brand names, descriptions, and prices.

• Provides an Add to Cart button for each product.

Objective: The main objective of this project is to understand API integration, asynchronous JavaScript, Fetch API, and DOM manipulation in a real-world application.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        span {
            font-size: 26px;
            font-weight: 600;
        }

        div {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            width: 450px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px ;
            gap: 30px;

        }
        div:hover {
            transform: scale(1.1);
        }

        img {
            width: 300px;
        }

        .price {
            text-decoration: line-through;

        }

        body {
            display: grid;
            grid-template-columns: /*repeat(3, minmax(0, 1fr));*/ repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }

        button {
            padding: 15px 20px;
            font-weight: 700;
            background-color: rgb(8, 98, 216);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        button:hover {
            background-color: rgb(17, 59, 199);
        }
    </style>

</head>
<body>
    <script>
        fetch("https://dummyjson.com/products?limit=200")
            .then((res) => res.json())
            .then((data) => {
        const productList = data.products;

        for (let i = 0; i < productList.length; i++) {

             const card = document.createElement("div");

                    const elem = document.createElement("img");
                    elem.src = productList[i].images[0];
                    card.appendChild(elem);

                    const brandTag = document.createElement("h3");
                    brandTag.innerText = `Brand : ${productList[i].brand}`;
                    card.appendChild(brandTag);

                    const para = document.createElement("p");
                    para.innerHTML = `<span>Description :</span> ${productList[i].description}`;
                    card.appendChild(para);

                    const priceTag = document.createElement("h3");
                    priceTag.className = "price";
                    priceTag.innerText = `Price :  ${productList[i].price}`;
                    card.appendChild(priceTag);

                    const btn = document.createElement("button");
                    btn.innerText = "Add to cart";
                    card.appendChild(btn);

                    document.body.appendChild(card);

                }
            })
    </script>

</body>
</html>

image :