removed array syntax from classList in 16-ES6 Slider

Author: john-smilga

16-ES6-slider/final/app.js

@@ -1,29 +1,29 @@
-import data from "./data.js";
-const container = document.querySelector(".slide-container");
-const nextBtn = document.querySelector(".next-btn");
-const prevBtn = document.querySelector(".prev-btn");
+import data from './data.js'
+const container = document.querySelector('.slide-container')
+const nextBtn = document.querySelector('.next-btn')
+const prevBtn = document.querySelector('.prev-btn')
 // if length is 1 hide buttons
 if (data.length === 1) {
-  nextBtn.style.display = "none";
-  prevBtn.style.display = "none";
+  nextBtn.style.display = 'none'
+  prevBtn.style.display = 'none'
 }
 // if length is 2, add copies of slides
-let people = [...data];
+let people = [...data]
 if (data.length === 2) {
-  people = [...data, ...data];
+  people = [...data, ...data]
 }
 container.innerHTML = people
   .map((person, slideIndex) => {
-    const { img, name, job, text } = person;
-    let position = "next";
+    const { img, name, job, text } = person
+    let position = 'next'
     if (slideIndex === 0) {
-      position = "active";
+      position = 'active'
     }
     if (slideIndex === people.length - 1) {
-      position = "last";
+      position = 'last'
     }
     if (data.length <= 1) {
-      position = "active";
+      position = 'active'
     }
     return `<article class="slide ${position}">
   <img src=${img} class="img" alt="${name}"/>
@@ -35,40 +35,40 @@ container.innerHTML = people
 <div class="quote-icon">
 <i class="fas fa-quote-right"></i>
 </div>
- </article>`;
+ </article>`
   })
-  .join("");
+  .join('')
 
 const startSlider = (type) => {
   // get all three slides active,last next
-  const active = document.querySelector(".active");
-  const last = document.querySelector(".last");
-  let next = active.nextElementSibling;
+  const active = document.querySelector('.active')
+  const last = document.querySelector('.last')
+  let next = active.nextElementSibling
   if (!next) {
-    next = container.firstElementChild;
+    next = container.firstElementChild
   }
-  active.classList.remove(["active"]);
-  last.classList.remove(["last"]);
-  next.classList.remove(["next"]);
+  active.classList.remove('active')
+  last.classList.remove('last')
+  next.classList.remove('next')
 
-  if (type === "prev") {
-    active.classList.add("next");
-    last.classList.add("active");
-    next = last.previousElementSibling;
+  if (type === 'prev') {
+    active.classList.add('next')
+    last.classList.add('active')
+    next = last.previousElementSibling
     if (!next) {
-      next = container.lastElementChild;
+      next = container.lastElementChild
     }
-    next.classList.remove(["next"]);
-    next.classList.add("last");
-    return;
+    next.classList.remove('next')
+    next.classList.add('last')
+    return
   }
-  active.classList.add("last");
-  last.classList.add("next");
-  next.classList.add("active");
-};
-nextBtn.addEventListener("click", () => {
-  startSlider();
-});
-prevBtn.addEventListener("click", () => {
-  startSlider("prev");
-});
+  active.classList.add('last')
+  last.classList.add('next')
+  next.classList.add('active')
+}
+nextBtn.addEventListener('click', () => {
+  startSlider()
+})
+prevBtn.addEventListener('click', () => {
+  startSlider('prev')
+})