এবার , সার্ভিসেজ পেজটিকে ডায়নামিক করে ফেলা যাক । এর জন্য অবশ্য আমাদের প্রজেক্টের ব্যাক-এন্ড পার্টে তৈরি করা API-এর সাহায্য নিতে হবে ।
Services লোড করা ও শো করার জন্য app.js ফাইলে loadServices( ) ও displayService( ) নামে ২ টি ফাঙ্গশন লিখে ফেলি-
const loadServices = () => {
fetch("https://testing-8az5.onrender.com/services/")
.then((res) => res.json())
.then((data) => displayService(data))
.catch((err) => console.log(err));
};
const displayService = (services) => {
// console.log(services);
services.forEach((service) => {
const parent = document.getElementById("service-container");
const li = document.createElement("li");
li.innerHTML = `
<div class="card shadow h-100">
<div class="ratio ratio-16x9">
<img
src=${service.image}
class="card-img-top"
loading="lazy"
alt="..."
/>
</div>
<div class="card-body p-3 p-xl-5">
<h3 class="card-title h5">${service.name}</h3>
<p class="card-text">
${service.description.slice(0, 140)}
</p>
<a href="#" class="btn btn-primary">Details</a>
</div>
</div>
`;
parent.appendChild(li);
});
};
// Calling Functions
loadServices();
body{
/* width: 1200px; */
/* border: 1px solid gray; */
margin: auto;
background-color: rgb(241, 234, 234);
}
li{
list-style: none;
}
nav{
background-color:aqua;
}
.menu{
font-size: 20px;
}
.menu:hover{
color: white;
cursor: pointer;
}
.banner-container{
width: 1200px;
margin: auto;
padding: 30px;
}
.banner{
height: 450px;
margin: auto;
display: flex;
text-align: center;
justify-content: space-around;
align-items: center;
background: linear-gradient(cyan,rgb(33, 137, 137));
box-shadow: 4px 4px 8px gray;
border-radius:10px;
/* padding: 30px; */
}
.bn-img{
width: 325px;
margin-top:-50px;
}
.
