# ১৮-৭ : Modal এর ব্যবহার

এই মডিউলে ডক্টর ডিটেইলস পেজে Take Appointment  বাটনে ক্লিক করলে একটি মোডাল শো করার কাজ করা হবে।

docDetails.js ফাইল  নিচের মত করে  লিখে ফেলি-

<mark style="color:green;">**Code:: 18.7.1**</mark> \
<mark style="color:red;">docDetails.js</mark>

```javascript
const getparams = () => {
    const param = new URLSearchParams(window.location.search).get("doctorId");
    loadTime(param);
    fetch(`https://testing-8az5.onrender.com/doctor/list/${param}`)
      .then((res) => res.json())
      .then((data) => displayDetails(data));
  
    fetch(`https://testing-8az5.onrender.com/doctor/review/?doctor_id=${param}`)
      .then((res) => res.json())
      .then((data) => doctorReview(data));
  };
  
  const doctorReview = (reviews) => {
    reviews.forEach((review) => {
      const parent = document.getElementById("doc-details-review");
      const div = document.createElement("div");
      div.classList.add("review-card");
      div.innerHTML = `
            <img src="./Images/girl.png" alt="" />
                <h4>${review.reviewer}</h4>
                <p>
                 ${review.body.slice(0, 100)}
                </p>
                <h6>${review.rating}</h6>
            `;
      parent.appendChild(div);
    });
  };
  
  const displayDetails = (doctor) => {
    console.log(doctor);
    const parent = document.getElementById("doc-details");
    const div = document.createElement("div");
    div.classList.add("doc-details-container");
    div.innerHTML = `
      <div class="doctor-img">
      <img src=${doctor.image} alt="" />
    </div>
    <div class="doc-info">
      <h1>${doctor.full_name} </h1>
      ${doctor.specialization.map((item) => {
        return `<button class="doc-detail-btn">${item}</button>`;
      })}
      ${doctor.designation.map((item) => {
        return `<h4 >${item}</h4>`;
      })}
  
      <p class="w-50">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quibusdam
        quis excepturi tempore. Eius, qui!
      </p>
  
      <h4>Fees: ${doctor.fee} BDT</h4>
      <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"
    >
     Take Appointment
    </button>
    </div>
      `;
    parent.appendChild(div);
  };
  
  
  getparams();
  
```

HTML ফাইলে মোডাল এ্যাড করে নিচের মত লিখি-

<mark style="color:green;">**Code:: 18.1.2**</mark>\
<mark style="color:red;">docDetails.html</mark>

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detail</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="..."
    />
    <link
      href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="d-flex justify-content-around align-items-center p-4">
      <div class="logo-container d-flex align-items-center gap-2">
        <img src="./Images/stethoscope 1.png" alt="" />
        <h3>SmartCare</h3>
      </div>
      <div class="menu-container d-flex gap-3">
        <li class="menu">Home</li>
        <li class="menu">Services</li>
        <li class="menu">Contact us</li>
        <li class="menu">Login</li>
      </div>
    </nav>

    <div id="doc-details"></div>

    <div class="review-container p-5 mt-5 w-75 m-auto">
      <h1 class="title">Clients Review</h1>
      <p class="description text-center w-50 m-auto">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
        <br />
        quis sit, aperiam deserunt at accusamus!
      </p>
      <div class="reviews">
        <div
          class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible"
        >
          <ul id="doc-details-review" class="slider-container py-4"></ul>

          <button
            type="button"
            class="slider-nav"
            aria-label="Go left"
          ></button>
          <button
            type="button"
            class="slider-nav slider-nav-next"
            aria-label="Go left"
          ></button>

          <div class="slider-indicators">
            <button class="active" aria-label="Go to slide"></button>
            <button aria-label="Go to slide"></button>
            <button aria-label="Go to slide"></button>
            <button aria-label="Go to slide"></button>
            <button aria-label="Go to slide" class=""></button>
          </div>
        </div>
      </div>
    </div>

    <!-- modal area -->
    <!-- Button trigger modal -->

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Submit Your Info</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <input type="radio" name="status" value="Offline" /> Offline
            <input type="radio" name="status" value="Online" /> Online<br />

            <input id="symptom" type="text" placeholder="Type Your symptom" />
            <br />

            <select id="time-container" class="p-2 mt-2" id="time" name="time">
              <!-- <option value="none" selected>available Time</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
              <option value="other">other</option> -->
            </select>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button
              onclick="handleAppointment()"
              type="button"
              class="btn btn-primary"
            >
              Take Appointment
            </button>
          </div>
        </div>
      </div>
    </div>

    <button onclick="handlePdf()">dddd</button>

    <footer class="p-5">
      <div class="container w-75 m-auto row p-5">
        <div class="col-md-6">
          <p><small>Copyright © Smartcare. All Rights Reserved</small></p>
          <h5>Follow US</h5>
          <div class="icons">
            <img class="icon" src="./Images/LinkedIn.png" alt="" />
            <img class="icon" src="./Images/YouTube.png" alt="" />
            <img class="icon" src="./Images/LinkedIn.png" alt="" />
          </div>
        </div>
        <div class="col-md-3">
          <h5>Company</h5>
          <li>ABout</li>
          <li>Contact us</li>
          <li>Culture</li>
          <li>Blog</li>
        </div>
        <div class="col-md-3">
          <h5>Company</h5>
          <li>ABout</li>
          <li>Contact us</li>
          <li>Culture</li>
          <li>Blog</li>
        </div>
      </div>
      <hr />
      <p class="text-center mt-3">
        <small>Copyright © Smartcare. All Rights Reserved</small>
      </p>
    </footer>

    <!-- add script file  -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>

    <script src="./app.js"></script>
    <script src="./docDetails.js"></script>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
      integrity="..."
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js"
      crossorigin="anonymous"
      defer
    ></script>
  </body>
</html>
```

Take Appointment বাটনে ক্লিক করলে মোডালটি দেখা যাবে।

.
