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>
body {
background-color: #f9f9f9;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
gap: 20px;
/* border: 1px solid green; */
}
div {
background: white;
/* border: 1px solid #ddd; */
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e7e7e7;
/* background-color: #ffffff; */
background: linear-gradient(135deg, #232f3e, #37475a, #131a22);
}
/* background: linear-gradient(145deg,#1f2937,#111827,#0f172a, #020617); */
/* background: linear-gradient(145deg, #232f3e, #1e293b, #0f172a, #000000); */
/* background: linear-gradient(135deg, #131921, #232f3e, #37475a); */
/* background: linear-gradient(135deg, #667eea, #764ba2); */
/* background: linear-gradient(135deg, #3d2b1f, #a67c52, #f4d03f); */
/* background: linear-gradient(135deg, #2c3e50, #4ca1af); */
/* background: linear-gradient(135deg, #000428, #004e92); */
/* background: linear-gradient(135deg, #200122, #6f0000); */
/* background: linear-gradient(135deg, #232526, #414345); */
h2 {
font-size: 1rem;
height: 3em;
overflow: hidden;
text-align: center;
margin: 10px 0;
color: #ff9900;
}
h3 {
color: #d9dfe6;
margin: 5px 0;
}
img {
height: 150px;
width: auto;
object-fit: contain;
margin-bottom: 15px;
}
p {
font-size: 0.85rem;
color: #c7c0c0;
height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<script>
async function fetchproducts() {
try {
const response = await fetch('https://fakestoreapi.com/products')
const data = await response.json();
data.forEach(element => {
const newDivision = document.createElement("div")
const title = document.createElement("h2")
const img = document.createElement("img")
const price = document.createElement("h3")
const rating = document.createElement("h3")
const description = document.createElement("p");
title.innerText = element.title;
img.src = element.image;
price.innerText = `PRICE $${element.price}`;
rating.innerText = `RATING ${element.rating.rate}`;
description.innerText = `Product Description ${element.description}`
newDivision.appendChild(title);
newDivision.appendChild(img);
newDivision.appendChild(price);
newDivision.appendChild(rating);
newDivision.appendChild(description);
document.body.appendChild(newDivision);
});
}
catch (error) {
console.log(error);
}
}
fetchproducts();
</script>
</body>
</html>
OUTPUT :
Top comments (0)