Dummy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>
<style>
.outer {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px;
}
.product-card {
border: 1px solid #d1d3d4;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background: #fff;
}
.tag {
background: #98d8e8;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
display: inline-block;
}
</style>
</head>
<body>
<div class="outer" id="outer"></div>
<button onclick="run1()">Generate Products</button>
<script>
const root1 = document.getElementById('outer');
const tree1 = [
{
"product_name": "HDFC Life Click 2 Protect Super",
"uin_no": "UIN: 101N145V07",
"tag": "Trending",
"product_dsec": "Looking for complete protection under one plan at affordable cost along with tax benefits",
"product_category": "Term Plan",
"product_key_features": [
"Get back your premiums at zero cost via Smart Exit Benefit Option",
"Buy Online and get 7% discount",
"Death Benefit paid in advance on diagnosis of Terminal illness"
]
},
{
"product_name": "HDFC Life Sanchay Plus",
"uin_no": "UIN: 101N134V24",
"tag": "Trending",
"product_dsec": "Looking for safe financial instrument which provides alternate source of income",
"product_category": "Savings Plan",
"product_key_features": [
"Guaranteed Income for period of 25 or 30 years",
"Get Back Premiums as Guaranteed Lumpsum Benefit on maturity",
"Life Cover to protect your family"
]
},
{
"product_name": "HDFC Life Sampoorn Nivesh",
"uin_no": "UIN: 101L103V03",
"product_dsec": "An insurance and investment plan with loyalty additions and multiple fund options to help you optimize your investment",
"product_category": "ULIP Plan",
"product_key_features": [
"Choose from 12 Funds to optimize your investment returns",
"Customize your premium payment options – Single, Limited or Regular",
"Choose from 3 convenient Benefit options to customize your payouts"
]
}
];
function run1() {
root1.innerHTML = "";
tree1.forEach(product => createTemplate1(product, root1));
}
function createTemplate1(product, domElement) {
let productDiv = document.createElement('div');
productDiv.classList.add('product-card');
productDiv.innerHTML = `
<div class="tag">${product.tag || ""}</div>
<h2>${product.product_name}</h2>
<p><strong>${product.uin_no}</strong></p>
<p>${product.product_dsec}</p>
<p><strong>Category:</strong> ${product.product_category}</p>
<ul>
${product.product_key_features.map(feature => `<li>${feature}</li>`).join('')}
</ul>
<button> CALCULATE PREMIUM</button>
<button> EXPLORE PLAN </button>
`;
domElement.appendChild(productDiv);
}
</script>
.....................................................................................................
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dynamic Products</title> <style> body { font-family: Arial, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column; } .container { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .product-card { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 350px; border: 1px solid #ddd; position: relative; } .tag { position: absolute; top: 10px; right: 10px; background: #98d8e8; padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; } .product-name { font-size: 18px; font-weight: bold; color: #d71920; } .category { background: #007bff; color: white; padding: 5px 10px; display: inline-block; border-radius: 5px; margin-top: 10px; } .features { margin-top: 10px; } .features li { margin-bottom: 5px; } .buttons { margin-top: 10px; } .buttons button { padding: 8px 15px; margin-right: 5px; border: none; cursor: pointer; border-radius: 5px; font-weight: bold; } .calculate { background: red; color: white; } .explore { background: #007bff; color: white; } </style> </head> <body> <button onclick="renderProducts()">Load Products</button> <div class="container" id="productContainer"></div><script>
const products = [
{
product_name: "HDFC Life Click 2 Protect Super",
uin_no: "UIN: 101N145V07",
tag: "Trending",
product_dsec:
"Looking for complete protection under one plan at affordable cost along with tax benefits",
product_category: "Term Plan",
product_key_features: [
"Get back your premiums at zero cost via Smart Exit Benefit Option",
"Buy Online and get 7% discount",
"Death Benefit paid in advance on diagnosis of Terminal illness",
],
},
{
product_name: "HDFC Life Sanchay Plus",
uin_no: "UIN: 101N134V24",
tag: "Trending",
product_dsec:
"Looking for safe financial instrument which provides alternate source of income",
product_category: "Savings Plan",
product_key_features: [
"Guaranteed Income for period of 25 or 30 years",
"Get Back Premiums as Guaranteed Lumpsum Benefit on maturity",
"Life Cover to protect your family",
],
},
{
product_name: "HDFC Life Sampoorn Nivesh",
uin_no: "UIN: 101L103V03",
tag: "Trending",
product_dsec:
"An insurance investment plan with loyalty additions and multiple fund options to help you optimize your investment",
product_category: "ULIP Plan",
product_key_features: [
"Choose from 12 Funds to optimize your investment returns",
"Customize your premium payment options – Single, Limited or Regular",
"Choose from 3 convenient Benefit options to customize your payouts",
],
},
];
function renderProducts() {
const container = document.getElementById("productContainer");
container.innerHTML = "";
products.forEach((product) => {
const productDiv = document.createElement("div");
productDiv.className = "product-card";
productDiv.innerHTML = `
<div class="tag">${product.tag}</div>
<div class="product-name">${product.product_name}</div>
<div>${product.uin_no}</div>
<div class="category">${product.product_category}</div>
<p>${product.product_dsec}</p>
<ul class="features">
${product.product_key_features
.map((feature) => `<li>${feature}</li>`)
.join("")}
</ul>
<div class="buttons">
<button class="calculate">Calculate Premium</button>
<button class="explore">Explore Plan</button>
</div>
`;
container.appendChild(productDiv);
});
}
</script>