১৭-৫ : সার্ভিসেস পেজ - ডায়নামিক

এবার , সার্ভিসেজ পেজটিকে ডায়নামিক করে ফেলা যাক । এর জন্য অবশ্য আমাদের প্রজেক্টের ব্যাক-এন্ড পার্টে তৈরি করা API-এর সাহায্য নিতে হবে ।

Services API Link:

https://testing-8az5.onrender.com/services/testing-8az5.onrender.com

Services লোড করা ও শো করার জন্য app.js ফাইলে loadServices( ) ও displayService( ) নামে ২ টি ফাঙ্গশন লিখে ফেলি-

Code:: 17.5.1 app.js

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();
  

style.css ফাইলটি নিচের মত করে লিখে ফেলি-

Code:: 17.5.2 style.css

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;
}

এখন, ব্রাউজারে নিচের মত আউটপুট দেখা যাবে-

.