Building a Simple Product Card Interface Using HTML, CSS, and JavaScript

Source: Dev.to

Simple Product Card Using HTML, CSS, and JavaScript

In this small project I created a product card layout similar to shopping websites like Amazon or Flipkart. The page shows different products in a grid format, and each product card contains an image, product title, price, and an Add Cart button. I also added previous and next buttons to change the product images.

This project is useful for beginners who want to learn how HTML, CSS, and JavaScript work together to build a simple shopping interface.

Getting Product Data from API

Instead of writing product details manually in HTML, I used an API to load the product data automatically.

async function item() {
    const response = await fetch('https://api.escuelajs.co/api/v1/products');
    const data = await response.json();
    return data;
}

The fetch() function sends a request to the API and returns product information such as title, price, and images. The response is converted into JSON so it can be used inside JavaScript. This is how many modern websites get data from servers.

Creating Product Cards Dynamically

After retrieving the product data, JavaScript iterates over each product and creates a card for it.

item().then((products) => {
    products.forEach(product => {
        // create card elements here
    });
});

Instead of writing many HTML cards manually, JavaScript creates them automatically using DOM methods. This saves time and makes the website dynamic.

Each card contains:

• Product image
• Previous button
• Next button
• Product title
• Product price
• Add Cart button
• Cart quantity counter

Showing Product Images

Every product may have one or more images. The image is displayed using the source from the API.

image.src = images.length > 0 ? images[index] : "";

The code checks if images exist; if they do, it shows the first image.

Image Slider Feature

Some products contain multiple images. To navigate them, I added Previous (◀) and Next (▶) buttons.

pre.onclick = function () {
    index--;
    if (index = images.length) {
        index = 0;
    }
    image.src = images[index];
};

These buttons allow users to switch between product images, making the product card more interactive.

Add to Cart Function

Each product card has an Add Cart button. When the user clicks the button, the quantity displayed next to it increases.

button.onclick = function () {
    quantity++;
    count.innerText = quantity;
};

This simple implementation shows how many times a product has been added. In real e‑commerce sites, this value would be stored in a shopping cart system.

Styling the Product Cards

CSS is used to make the cards look clean and professional. The products are arranged in a grid layout that adjusts automatically based on screen size.

Key design features:

• Card shadow effect
• Hover animation
• Clean product image display
• Clear title and price text
• Bright Add Cart button

These styles help the page resemble a real shopping website.

What I Learned from This Project

Building this project reinforced several important web development concepts:

• Fetching data from an API
• Using JavaScript DOM methods to create elements dynamically
• Handling button click events
• Designing responsive product cards with CSS

Overall, the project deepened my understanding of how dynamic web pages work.