@@ -37,3 +37,61 @@ const reviews = [
       "Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ",
   },
 ];
+
+//select items
+const img = document.getElementById("person-img");
+const author = document.getElementById("author");
+const job = document.getElementById("job");
+const info = document.getElementById("info");
+
+const prevBtn = document.querySelector(".prev-btn");
+const nextBtn = document.querySelector(".next-btn");
+const randomBtn = document.querySelector(".random-btn");
+
+//set starting item
+let currentItem = 0;
+
+//load initial item 
+window.addEventListener("DOMContentLoaded", function () {
+  const item = reviews[currentItem];
+  //load initial item--  img.src = item.img;
+  //load initial item--- author.textContent = item.name;
+  //load initial item--- job.textContent = item.job;
+  //load initial item--- info.textContent = item.text;
+  showPerson(currentItem);
+});
+
+//show person based on item+add function
+function showPerson() {
+  const item = reviews[currentItem];
+  img.src = item.img;
+  author.textContent = item.name;
+  job.textContent = item.job;
+  info.textContent = item.text;
+}
+
+//show next person
+nextBtn.addEventListener("click", function () {
+  currentItem++;
+  if (currentItem > reviews.length - 1) {
+    currentItem = 0;
+  };
+  showPerson();
+})
+
+
+//show prev person
+prevBtn.addEventListener("click", function () {
+  currentItem--;
+  if (currentItem < 0) {
+    currentItem = reviews.length - 1;
+  };
+  showPerson();
+})
+
+//show random person
+randomBtn.addEventListener("click", function () {
+  currentItem = Math.floor(Math.random() * reviews.length)
+  console.log(currentItem);
+  showPerson();
+})
@@ -1,20 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Starter</title>
-    <!-- font awesome  -->
-    <link
-      rel="stylesheet"
-      href="./fontawesome-free-5.12.0-web/css/all.min.css"
-    />
-    <!-- styles -->
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>review project</h1>
-    <!-- javascript -->
-    <script src="app.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Starter</title>
+  <!-- font awesome  -->
+  <link rel="stylesheet" href="./fontawesome-free-5.12.0-web/css/all.min.css" />
+  <!-- styles -->
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <main>
+    <div class="container">
+      <div class="title">
+        <h2>our reviews</h2>
+        <div class="underline"></div>
+      </div>
+      <article class="review">
+        <div class="img-container">
+          <img src="./person-1.jpeg" id="person-img" alt="">
+        </div>
+        <h4 id="author">sara jones</h4>
+        <p id="job">ux designer</p>
+        <p id="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+          ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+          id est laborum.</p>
+        <!--prev 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>
+          <!--random button-->
+          <btn class="random-btn">surprise me</btn>
+        </div>
+      </article>
+    </div>
+  </main>
+  <!-- javascript -->
+  <script src="app.js"></script>
+</body>
+
+</html>