@@ -37,3 +37,57 @@ 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. ",
   },
 ];
+
+// selecionar itens
+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;
+
+// carregando o item inicial
+window.addEventListener("DOMContentLoaded", function () {
+  showPerson();
+});
+
+//mostrar pessoa baseado no item
+function showPerson() {
+  const item = reviews[currentItem];
+  img.src = item.img;
+  author.textContent = item.name;
+  job.textContent = item.job;
+  info.textContent = item.text;
+}
+
+// mostrar proxima pessoa
+
+nextBtn.addEventListener('click', function () {
+  currentItem++;
+  if (currentItem > reviews.length - 1) {
+    currentItem = 0;
+  }
+  showPerson();
+});
+
+//mostrar pessoa anterior
+
+prevBtn.addEventListener("click", function () {
+  currentItem--;
+  if (currentItem < 0) {
+    currentItem = reviews.length -1;
+  }
+  showPerson();
+});
+
+// show random version
+randomBtn.addEventListener("click", function () {
+  currentItem = Math.floor(Math.random() * reviews.length);
+  showPerson();
+});
@@ -13,7 +13,38 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>review project</h1>
+    <main>
+      <section class="container">
+        <!--title-->
+        <div class="title">
+          <h2>Our reviews</h2>
+          <div class="underline"></div>
+        </div>
+        <!--review-->
+        <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 adipisicing elit. 
+            Vitae nulla veritatis cupiditate iste laborum mollitia ad laudantium ea, 
+            necessitatibus eaque illum, corrupti esse exercitationem. 
+            Illo repellat asperiores hic nihil a.</p>
+          <!--prev next button-->
+          <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">suprise me</button>
+        </article>
+      </section>
+    </main>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>