May 12 2026
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>
*{
bottom: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
border: 1px solid rgb(195, 235, 17);
display: grid;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
padding: 20px;
gap: 20px;
background:linear-gradient(rgb(247, 246, 246),rgb(4, 4, 4)) ;
}
/* Header */
div{
border: 3px solid rgb(78, 251, 3);
padding: 20px;
border-radius: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background:linear-gradient(rgb(252, 251, 251),white) ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h2{
color: rgb(250, 248, 248);
font-family: 'Times New Roman', Times, serif;
/* display: flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
}
img {
width: 100%;
height: 250px;
object-fit: contain;
background-color: #f8f9fa;
padding: 20px;
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
h3{
color: rgb(5, 252, 5);
margin-bottom: 20px;
}
h4{
color: rgb(251, 223, 7);
margin-bottom: 20px;
}
p{
color:#666;
}
#h{
color: #f8f9fa;
border: 1px solid wheat;
display:flex;
flex-direction: column;
}
</style>
</head>
<body>
<script>
async function product() {
try {
const rec = await fetch('https://fakestoreapi.com/products');
const data = await rec.json();
console.log(data);
data.forEach(name);
function name(params) {
const bigbox= document.createElement("div")
const box = document.createElement("div");
const title = document.createElement("h2")
const image = document.createElement("img")
const price = document.createElement("h3")
const rating = document.createElement("h4")
const description = document.createElement("p")
title.innerText = params.title;
image.src = params.image;
price.innerHTML = `💰 Price ${params.price}`;
rating.innerText = `⭐ Rating ${params.rating.rate}`;
description.innerText = `Description ${params.description.substring(0, 120)}...`;
box.appendChild(image)
box.appendChild(title)
box.appendChild(price)
box.appendChild(rating)
box.appendChild(description)
document.body.appendChild(box)
}
} catch (error) {
console.log("Loading...")
}
}
product();
</script>
</body>
</html>
output
Top comments (0)