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 20
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 :
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.