# ১৮-২ : ডায়নামিক রিভিউ

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

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

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

```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 লিখি-

<mark style="color:green;">**Code:: 18.2.2**</mark>\
<mark style="color:red;">style.css</mark>

```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( )  ফাংশন এ্যাড করে ফেলি-

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

```javascript
...
...
...

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

```

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

<figure><img src="https://3753355949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZjZRCk5NYynvfinzJmZE%2Fuploads%2FXG6tErlz95OVCjKlWEDv%2Fimage.png?alt=media&#x26;token=5a60ef16-f560-42bb-8f8b-e0ce3add2f3b" alt=""><figcaption></figcaption></figure>

.
