[miniProjects] 01_Expanding Cards

01_Expanding Cards

💻 주제 : 카드를 눌렀을 때 접혀져있던 카드가 크게 나타남.

• classList의 add, remove 기능을 활용해 패널을 active 상태로 만듦.
• css에서 패널 active를 구현 후 transition으로 유연하게 패널의 크기를 조정함.

const panels = document.querySelectorAll('.panel');

panels.forEach((panel) => {
  panel.addEventListener('click', () => {
    removeActiveClasses()
    panel.classList.add('active')
  })
});

function removeActiveClasses() {
  panels.forEach(panel => {
    panel.classList.remove('active')
  })
};

👍🏻'panel' 클래스를 가진 요소를 클릭할 때마다 해당 요소에 'active' 클래스를 추가하고, 다른 요소에서는 'active' 클래스를 제거하는 동작을 구현함.

❗forEach란?

forEach는 JavaScript 배열의 메서드 중 하나. 이 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하는 데 사용된다. forEach 메서드는 배열을 반복하면서 배열의 각 요소에 대해 지정된 함수를 호출한다.

forEach 메서드를 사용하면 반복문을 작성할 필요 없이 배열의 모든 요소를 순회하면서 작업을 수행할 수 있다.

const array = [1, 2, 3, 4, 5];

array.forEach(function(element) {
  console.log(element);
});

//결과
1
2
3
4
5