Adding functionality to the buttons reviews.

KAJASE · KAJASE · commit b4f7bfc83e4e · 2020-10-27T01:42:20.000+01:00
diff --git a/3-reviews/setup/app.js b/3-reviews/setup/app.js
@@ -37,3 +37,44 @@ 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. ",
   },
 ];
+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");
+
+let currentItem = 0;
+
+window.addEventListener('DOMContentLoaded', function(){
+  showPerson(currentItem);
+});
+
+function showPerson(person){
+  const item = reviews[person];
+  img.src = item.img;
+  author.textContent = item.name;
+  job.textContent = item.job;
+  info.textContent = item.text;
+}
+
+nextBtn.addEventListener('click', function(){
+  currentItem++;
+  if(currentItem > reviews.length - 1) {
+    currentItem = 0;
+  }
+  showPerson(currentItem);
+});
+prevBtn.addEventListener('click', function(){
+  currentItem--;
+  if(currentItem < 0){
+    currentItem = reviews.length - 1;
+  }
+  showPerson(currentItem);
+});
+randomBtn.addEventListener('click', function(){
+  currentItem = Math.floor(Math.random() * reviews.length);
+  showPerson(currentItem);
+});
diff --git a/3-reviews/setup/index.html b/3-reviews/setup/index.html
@@ -14,7 +14,32 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>review project</h1>
+    <main>
+      <section 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 adipisicing elit. Quas molestias ut at rerum, recusandae mollitia laudantium ea fugiat nulla minima eum dolores explicabo? Consequuntur, numquam sint vel doloribus pariatur eaque?</p>
+          <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>
+          <button class="random-btn">surprise me</button>
+        </article>
+      </section>
+    </main>
+  
     <!-- javascript -->
     <script src="app.js"></script>
   </body>
