Ecommerce Website

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ecommerce Website</title>

    <style>
        body {
            font-family: Arial;
            margin: 20px;
            background-color: lightgray;
        }

        h1 {
            text-align: center;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .card {
            background-color: white;
            border: 1px solid black;
            padding: 10px;
        }

        .card img {
            width: 100%;
            height: 150px;
            object-fit: contain;
        }

        .title {
            font-size: 18px;
        }

        .description {
            font-size: 14px;
        }

        .price {
            color: green;
        }

        button {
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <h1>My Store</h1>

    <div class="container" id="container"></div>

    <script>

        const container = document.getElementById("container");

        fetch("https://fakestoreapi.com/products")
            .then((res) => res.json())
            .then((data) => {

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

                    // CARD
                    const card = document.createElement("div");
                    card.setAttribute("class", "card");

                    // IMAGE
                    const img = document.createElement("img");
                    img.src = data[i].image;

                    // TITLE
                    const title = document.createElement("h3");
                    title.innerText = data[i].title;
                    title.setAttribute("class", "title");

                    // DESCRIPTION
                    const desc = document.createElement("p");
                    desc.innerText = data[i].description;
                    desc.setAttribute("class", "description");

                    // PRICE
                    const price = document.createElement("h2");
                    price.innerText = "$" + data[i].price;
                    price.setAttribute("class", "price");

                    // BUTTON
                    const btn = document.createElement("button");
                    btn.innerText = "Add to Cart";

                    // APPEND
                    card.appendChild(img);
                    card.appendChild(title);
                    card.appendChild(desc);
                    card.appendChild(price);
                    card.appendChild(btn);

                    container.appendChild(card);
                }

            })
            .catch((err) => {
                console.log(err);
            });

    </script>

</body>

</html>
output:
https://javascript-project-bbfecd.gitlab.io/productCard.html
DEV Community

Ecommerce Website

Top comments (0)
