[토이 프로젝트] Review Carousel

Review Carousel 만들기

구현 방법	구현 완료
array	O
DOMContentLoaded	X
addEventListener	O
array.length	O
textContent	X

 

 

앞에서 counter와 비슷한데, 좀 더 복잡한 구조로 이루어져 있다. 먼저, infoObject와 imgArray라는 데이터의 정보를 담은 객체와 배열을 만들어주었다. 그런 다음에 forEach + addEventListener를 이용하는데, forEach를 버튼과 info items에 두 개를 중복하여 돌려주면서 조건문을 이용하여 왼쪽 버튼인 경우에는 왼쪽으로 변경되게 만들고, 오른쪽 버튼인 경우에는 오른쪽으로 변경되게 만들면 된다. 조건은 버튼의 id를 기준으로 나눠주었다. 

 

또한 나머지 값을 이용하여 범위를 벗어나지 않게 조절하였다. 음수가 되는 경우는 인덱스를 3으로 변경하여 3 > 2 > 1 > 0 > 3 > 2 > 1  > 0 ... 반복하게 만들어준다. 

 

랜덤한 정보를 보여주는 버튼은 Math.random을 이용하여 인덱스를 고르고, 위와 같이 정보를 변경하면 된다.

 

const infoObject = {
  name: ["Susan Smith", "Anna Johnson", "Peter Jones", "Bill Anderson"],
  job: ["WEB DEVELOPER", "WEB DESIGNER", "INTERN", "THE BOSS"],
  info: [
    "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
    "Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.",
    "Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.",
    "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 imgArray = [
  "./img/01.jpg",
  "./img/02.jpg",
  "./img/03.jpg",
  "./img/04.jpg",
];

const items = document.querySelectorAll(".info__items");
const btn = document.querySelectorAll(".btn");
const leftBtn = document.querySelector(".left__btn");
const rightBtn = document.querySelector(".right__btn");
const img = document.querySelector(".image");
let cnt = 0;

// 오른쪽 버튼을 눌렀을 때, 오른쪽 방향으로 계속 넘어가기. 4를 넘어가는 순간에 undefined가 뜨기 때문에, %을 이용하자.
// 왼쪽 버튼을 눌렀을 때, 왼쪽 방향으로 계속 넘어가기. -1이 되는 순간에 바로 4로 변경하기.
// 계속 클릭 카운트를 세어줘야 한다.

btn.forEach((btn) => {
  btn.addEventListener("click", () => {
    if (btn.id === "left__btn") {
      cnt -= 1;
      if (cnt < 0) {
        cnt = 3;
      }
      items.forEach((item) => {
        let objectKey = item.id;
        item.innerText = infoObject[objectKey][cnt % imgArray.length];
        img.setAttribute("src", imgArray[cnt % imgArray.length]);
      });
    } else {
      cnt += 1;
      items.forEach((item) => {
        let objectKey = item.id;
        item.innerText = infoObject[objectKey][cnt % imgArray.length];
        img.setAttribute("src", imgArray[cnt % imgArray.length]);
      });
    }
  });
});

// Surprise Me : 랜덤하게 인물 가져오기.

const randomClick = () => {
  let randomIdx = Math.floor(Math.random() * imgArray.length);
  items.forEach((item) => {
    let targetKey = item.id;
    item.innerText = infoObject[targetKey][randomIdx];
    img.setAttribute("src", imgArray[randomIdx]);
  });
};