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

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

Doctors API Link:

https://testing-8az5.onrender.com/doctor/list/testing-8az5.onrender.com

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

Code:: 17.7.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);
    });
  };




  const loadDoctors = (search) => {
    document.getElementById("doctors").innerHTML = "";
    document.getElementById("spinner").style.display = "block";
    console.log(search);
    fetch(
      `https://testing-8az5.onrender.com/doctor/list/`)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        if (data.results.length > 0) {
          document.getElementById("spinner").style.display = "none";
          document.getElementById("nodata").style.display = "none";
          displyDoctors(data?.results);
        } else {
          document.getElementById("doctors").innerHTML = "";
          document.getElementById("spinner").style.display = "none";
          document.getElementById("nodata").style.display = "block";
        }
      });
  };
  
  const displyDoctors = (doctors) => {
    doctors?.forEach((doctor) => {
      // console.log(doctor);
      const parent = document.getElementById("doctors");
      const div = document.createElement("div");
      div.classList.add("doc-card");
      div.innerHTML = `
          <img class="doc-img" src=${doctor.image} alt="" />
                <h4>${doctor?.full_name}</h4>
                <h6>${doctor?.designation[0]}</h6>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis,
                  numquam!
                </p>
               
                <p>
                
                ${doctor?.specialization?.map((item) => {
                  return `<button>${item}</button>`;
                })}
                </p>
  
                <button > <a target="_blank" href="docDetails.html?doctorId=${
                  doctor.id
                }">Details</a> </button>
          `;
  
      parent.appendChild(div);
    });
  };
  



//   Calling Functions

loadServices();
loadDoctors();
  

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;
}
.service-container{
    width: 1200px;
    margin: auto;
    margin-top: 50px;
    
}
.title{
    font-size: 44px;
    color: aqua;
    text-align: center;

}
.doctors-container{

    margin-top: 50px;
    padding: 30px;
}
.doc-card{
    width: 300px;

    height: 360px;
    box-shadow: 4px 4px 8px gray;
    border-radius: 10px;
    text-align:center;
    padding: 15px;
}
.doc-img{
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

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

.