১৮-২ : ডায়নামিক রিভিউ

এই মডিউলে আমরা ক্লায়েন্টের রিভিউ দেখানোর জন্য ইন্টারফেস ডিজাইন করব।

রিভিউ এর জন্য HTML লিখি-

Code:: 18.2.1 index.html

...
...
...

<!-- Reviews -->
      <div class="review-container p-5 mt-5 w-75 m-auto">
        <h1 class="title">Clients Review about us</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="review-container" 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>


...
...
...

রিভিউ এর জন্য CSS লিখি-

Code:: 18.2.2 style.css

...
...
...


.review-card{
    width: 250px;
    height: 300px;
    box-shadow: 4px 4px 8px gray;
    border-radius:10px;
    text-align: center;
    padding: 10px;
}
.review-card img{
    width: 70px;
    height: 70px;
    border-radius:50px;
}

app.js ফাইলে loadReview( ) ও displayReview( ) ফাংশন এ্যাড করে ফেলি-

Code:: 18.2.3 app.js

...
...
...

const loadReview = () => {
    fetch("https://testing-8az5.onrender.com/doctor/review/")
      .then((res) => res.json())
      .then((data) => displayReview(data));
  };
  
  const displayReview = (reviews) => {
    reviews.forEach((review) => {
      const parent = document.getElementById("review-container");
      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);
    });
  };
  

...
...
...

loadReview();

এ্যাড করা রিভিউ ব্রাউজারে দেখা যাচ্ছে-

.