JavaScript <event 갤러리>

JavaScript event

 

버튼을 클릭하면 이미지가 다크모드로 변경되고 이미지를 클릭하면 메인이미지를 출력하도록 event를 사용합니다.

 

⭐HTML

<h1>Image Gallery Practice</h1>

  <!--  -->
  <div class="full-img">
    <img src="images/cat01.jpg" alt="대표썸네일" class="displayed-img" />
    <!-- 다크 모드를 위한 img 태그 위의 div -->
    <div class="overlay"></div>
    <button class="dark">다트모드</button>
  </div>
  <div class="thumb-bar"> 
    <!-- 썸네일을 위한 요소 -->
    
    <img src="images/cat01.jpg" alt="" />
    <img src="images/cat02.jpg" alt="" />
    <img src="images/dog01.jpg" alt="" />
    <img src="images/dog02.jpg" alt="" />
    <img src="images/dog03.jpg" alt="" /> 
  
  </div>

 

⭐JavaScript 

const thumbBar = document.querySelector('.thumb-bar');
const displayedImage = document.querySelector('.displayed-img');
const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

• 먼저 querySelector를 사용해 전체 이미지 요소와 버튼, 오버레이를 선택합니다.

const images = [
  "cat01.jpg",
  "cat02.jpg",
  "dog01.jpg",
  "dog02.jpg",
  "dog03.jpg",
];

const alts = {
  "cat01.jpg": "고양이1",
  "cat02.jpg": "고양이2",
  "dog01.jpg": "강아지1",
  "dog02.jpg": "강아지2",
  "dog03.jpg": "강아지3",
};

• 들어갈 이미지 파일 이름 배열 선언한 후 이미지에 대한 대체 텍스트를 저장하는 객체 선언합니다.

thumbBar.addEventListener('click', function(e) {
  if(e.target.tagName === 'IMG') {
    const imgSrc = e.target.src;
    displayedImage.src = imgSrc;
    displayedImage.alt = alts[imgSrc.split('/').pop()]
  }
})

• 썸네일 바에 이벤트 리스너 추가를 추가합니다.
• 클릭된 요소가 이미지일 경우 displayedImgae의 src와 alt를 업데이트합니다.
• 이미지 파일 이름 추출 및 대체 텍스트 설정합니다.

 

See the Pen Untitled by als5855 (@als5855) on CodePen.

 

 

 

• 다음은 버튼을 클릭해 다크모드 라이트 모드를 만듭니다.

btn.addEventListener('click', function() {

  if (btn.classList.contains('dark')) {
    //다크모드에서 라이트목
    btn.textContent = '라이트모드';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    btn.classList.remove('dark');
  } else{
    btn.textContent = '다크모드';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'
    btn.classList.add('dark');
  }
})

• btn에 'dark'클래스가 포함되면 이벤트가 실행되도록 btn.classList.contains('dark')를 if의 조건으로 설정한다.
• btn을 클릭하면 버튼은 다크모드에서 라이트모드로 내용이 바꿀 수 있도록 textContent를 사용합니다.
• overaly는 background 컬러가 적용되 미리 만들어 둔 overaly에 반투명한 스크린이 생긴다.
• btn에서 "dark"클래스가 없어지면서 라이트모드가 됩니다.
• 라이트모드에서는 else에서의 내용 처럼 라이트모드에서 btn클릭시 'dark'클래스가 다시 생기면서
  다크모드로 전환됩니다.

 

See the Pen Untitled by als5855 (@als5855) on CodePen.