১৮-১ : ডেজিগনেশন ও স্পেশালাইজেশন ফিল্টারিং

API-1 Doc Link (Course Content): https://docs.google.com/document/d/1i2AFOekqtf4FfmVamCfAi_mBC1u8U0TyrhC8QuikI9k/edit

API-2 Link (Try this): https://docs.google.com/document/d/1xdmd9C4cH5fL4ecdcLPRVbrx3nen95W00ZEQvWSzFBA/edit?usp=sharing

নোট: API-1 কোর্সে ব্যাবহার করা হয়েছে, প্র্যাকটিস করার API-2 রিকমান্ড করা হচ্ছে। (সব কিছুই একই, শুধুমাত্র ভিন্ন লিঙ্ক ) এই মডিউলে আমরা API থেকে ডেজিগনেশন ও স্পেশালাইজেশন ডেটা লোড করার পর সেই ডেটা ব্যবহার করে ডেজিগনেশন ও স্পেশালাইজেশন ফিল্টারিং করা।

app.js ফাইলের loadDesignation( ) ও loadSpecialization( ) ফাঙ্গশন নিচের মত করে লিখে ফেলি-

Code:: 18.1.1 app.js

...
...
...
    
  const loadDesignation = () => {
    fetch("https://testing-8az5.onrender.com/doctor/designation/")
      .then((res) => res.json())
      .then((data) => {
        data.forEach((item) => {
          const parent = document.getElementById("drop-deg");
          const li = document.createElement("li");
          li.classList.add("dropdown-item");
          li.innerText = item?.name;
          parent.appendChild(li);
        });
      });
  };
  const loadSpecialization = () => {
    fetch("https://testing-8az5.onrender.com/doctor/specialization/")
      .then((res) => res.json())
      .then((data) => {
        data.forEach((item) => {
          const parent = document.getElementById("drop-spe");
          const li = document.createElement("li");
          li.classList.add("dropdown-item");
          li.innerHTML = `
          <li onclick="loadDoctors('${item.name}')"> ${item.name}</li>
            `;
          parent.appendChild(li);
        });
      });
  };
  

 ...
 ...
 ...
 
 
loadDesignation();
loadSpecialization();

সার্চ ও ফিল্টারিং এর পর কোনো ডেটা না পাওয়া গেলে যে ইন্টারফেস দেখাবো তার জন্য HTML লিখি-

Code:: 18.1.2 index.html

...
...
...

<div class="col-md-8">
    <input id="search" type="text" placeholder="search..." />
    <button onclick="handleSearch()">Search</button>
    <div id="doctors" class="doctors mt-5"></div>
    <div id="nodata" class="nodata">
      <img src="./Images/nodata.png" alt="" />
    </div>
    <div id="spinner" class="loading text-center">
      <h4>loading....</h4>
    </div>
</div>

...
...
...

সার্চ ও ফিল্টারিং এর পর কোনো ডেটা না পাওয়া গেলে যে ইন্টারফেস দেখাবো তার জন্য CSS লিখি-

Code:: 18.1.3 style.css

...
...
...


#search{
    padding:10px;
    width: 75%;
    border: none;
}

#noData{
    display: none;
}

.nodata{
    display: none;
}
#spinner{
    display: none;
}

.