DEV Community

Cover image for Building a Simple Product Card Interface Using HTML, CSS, and JavaScript
Vinayagam
Vinayagam

Posted on

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

#webdev #javascript #beginners #tutorial

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() {
    let response = await fetch('https://api.escuelajs.co/api/v1/products')
    let data = await response.json()
    return data
}
Enter fullscreen mode Exit fullscreen mode

The fetch() function sends a request to the API and gets product information such as title, price, and images. After that, the response is converted into JSON format so it can be used inside JavaScript.

This is how many modern websites get data from servers.

Creating Product Cards Dynamically

After getting the product data, JavaScript goes through each product and creates a card for it.

item().then((products) => {
    products.forEach(product => {
Enter fullscreen mode Exit fullscreen mode

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 has one or more images. The image is displayed using the image source from the API.

image.src = images.length > 0 ? images[index] : ""
Enter fullscreen mode Exit fullscreen mode

This code checks if images exist. If images are available, it shows the first image.

Image Slider Feature

Some products contain multiple images. To show them, I added Previous (â—€) and Next (â–¶) buttons.

pre.onclick = function () {
    index--
    if (index < 0) {
        index = images.length - 1
    }
    image.src = images[index]
}
Enter fullscreen mode Exit fullscreen mode 
next.onclick = function () {
    index++
    if (index >= images.length) {
        index = 0
    }
    image.src = images[index]
}
Enter fullscreen mode Exit fullscreen mode

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

Add to Cart Function

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

button.onclick = function () {
    quantity++
    count.innerText = quantity
}
Enter fullscreen mode Exit fullscreen mode

This is a simple way to show how many times a product has been added.

In real e-commerce websites, this value is 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 so they adjust automatically based on screen size.

Some design features used in this project:

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

These styles help make the page look more like a real shopping website.

What I Learned from This Project

By building this project, I learned several important web development concepts:

  • How to fetch data from an API
  • How to use JavaScript DOM methods
  • How to create elements dynamically
  • How to handle button click events
  • How to design product cards using CSS

This project helped me understand how dynamic web pages work.

Top comments (0)