<!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">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200&display=swap"
    rel="stylesheet">
  <title>Review</title>
</head>

<body>
  <section class="wrapper">
    <h2>Our Reviews</h2>
    <span class="border"></span>
    <section class="card-wrapper">
      <div class="image">
        <i class="fas fa-quote-right"></i>
        <img class="reviwer-img" src="" alt="">
      </div>
      <p class="name"></p>
      <p class="job"></p>
      <p class="text"></p>
      <!-- prev and next buttons -->
      <div class="button-container">
        <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
        <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
      </div>
      <!-- random button -->
      <button class="random-btn">surprise me</button>
    </section>
  </section>
  <script src="./js/app.js"></script>
</body>

</html>
:root {
  --primary-text-color: #32617d;
  --primary-link-color: #17c3b2;
  --blue: #32617d;
  --sea-green: #17c3b2;
  --yellow: #ffcb77;
  --floral-white: #fef9ef;
  --light-coral: #fe6d73;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  color: var(--primary-text-color);
  letter-spacing: 1px;
}

img {
  max-width: 100%;
}

html,
body {
  min-height: 100vh;
}

h2,
p {
  text-align: center;
}

h2 {
  display: block;
  position: relative;
  margin: 2rem auto;
}

h2:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: inline-block;
  width: 50px;
  height: 3px;
  transform: translate(-50%);
  background-color: var(--light-coral);
}

.card-wrapper {
  width: 400px;
  margin: 2rem auto;
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 3px 5px 5px rgba(232, 226, 226, 0.3);
  border-radius: 10px;
}

.card-wrapper p {
  margin-bottom: 10px;
}

.image {
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
}

.image img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  box-shadow: 7px -5px 0px 0px var(--light-coral);
}

.fa-quote-right {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--light-coral);
  color: white;
  text-align: center;
  position: relative;
  top: 45px;
  left: 10px;
  line-height: 35px !important;
}

.name {
  text-transform: capitalize;
}

.job {
  text-transform: uppercase;
  color: var(--light-coral);
}

.button-container {
  margin: 15px 0;
}

.button-container button {
  margin: 0 1.5rem;
  border: none;
  background: none;
  width: 50px;
  height: 30px;
  cursor: pointer;
}

.random-btn {
  border: var(--light-coral) 1px solid;
  background: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  text-transform: capitalize;
}
const reviews = [
  {
    id: 1,
    name: "susan smith",
    job: "web developer",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632836319/people/people3_acuxkf.jpg",
    text: "This is Susan and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
  {
    id: 2,
    name: "anna jonson",
    job: "web designer",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632847566/people/people4_copy_uaotvb.jpg",
    text: "This is Anna and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
  {
    id: 3,
    name: "teri dactyl",
    job: "graphic designer",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632836319/people/people5_i2jvxl.jpg",
    text: "This is Teri and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
  {
    id: 4,
    name: "rita book",
    job: "ux researcher",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632836286/people/people2_bpvwuc.jpg",
    text: "This is Rita and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
  {
    id: 5,
    name: "chris anthemum",
    job: "front-end developer",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632836287/people/people1_mekbwk.jpg",
    text: "This is Chris and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
  {
    id: 6,
    name: "ray sin",
    job: "graphic designer",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632847565/people/people7_copy_mn1dmp.jpg",
    text: "This is Ray and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
  {
    id: 7,
    name: "daniel smith",
    job: "software engineer",
    img: "https://res.cloudinary.com/dsqwjsrvi/image/upload/v1632847565/people/people6_copy_yivqrj.jpg",
    text: "This is Ray and Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut sem in arcu mollis elementum in a nulla. ",
  },
];

// select items
let reviwerImage = document.querySelector(".reviwer-img");
let reviwerName = document.querySelector(".name");
let reviwerJob = document.querySelector(".job");
let reviwerText = document.querySelector(".text");

const prevButton = document.querySelector(".prev-btn");
const nextButton = document.querySelector(".next-btn");
const randomButton = document.querySelector(".random-btn");

// set starting item
let currentItem = 0;

// load initial item
window.addEventListener("DOMContentLoaded", () => {
  showPreson(currentItem);
});

const showPreson = (person) => {
  const item = reviews[person];
  reviwerImage.src = item.img;
  reviwerName.textContent = item.name;
  reviwerJob.textContent = item.job;
  reviwerText.textContent = item.text;
};

// show next person
nextButton.addEventListener("click", () => {
  currentItem++;
  if (currentItem > reviews.length - 1) {
    currentItem = 0;
  }
  showPreson(currentItem);
});

// show prev person
prevButton.addEventListener("click", () => {
  if (currentItem === 0) {
    currentItem = reviews.length;
  }
  currentItem--;
  showPreson(currentItem);
});

// show random person

const randomItem = (max) => {
  return Math.floor(Math.random() * max);
};

randomButton.addEventListener("click", () => {
  currentItem = randomItem(reviews.length);
  showPreson(currentItem);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.