accordion / modal / back to top

Accordion (아코디언)

 //.panel-question
let question = document.querySelectorAll('.panel-question'); 

/*
question을 클릭하면 모든 question에서 active를 제거하고
클릭한 그 요소에만 클래스명 active을 추가
*/
question.forEach(item=>{
    item.addEventListener('click',(e)=>{
        for(let list of question){
            list.classList.remove('active');
        }
        e.currentTarget.classList.add('active');
    })
});

//변수명 closeBtn에 collapse all을 지정하고 closeBtn을 클릭하면 모두 접는다
let closeBtn = document.getElementById('btn-collapse');

closeBtn.addEventListener('click',()=>{
        for (let qs of question){
            qs.classList.remove('active');
        }
    });

 

Modal (모달)

let galleryImg = document.querySelectorAll('.gallery img');
let lightbox = document.querySelector('#lightbox-overlay');
let lightboxImg = lightbox.querySelector('#lightbox-image');
// document (전체)에서 말고 ligthbox에서 찾는 수월함

/*
galleryImg를 클릭하면 할 일
변수명 targetImg에 클릭된 그 요소의 속성명 data-lightbox의 값을 저장
console에서 targetImg 값 확인
*/

for(let gi of galleryImg){
    gi.addEventListener('click',(e)=>{
        e.preventDefault();
        let targetImg = e.target.dataset.lightbox;
        console.log(targetImg);
        /*
        lightboxImg의 속성명 src의 값을 targetImg로 변경
        lightbox에 클래스명 visible 추가
        */
        lightboxImg.setAttribute('src',targetImg);
        lightbox.classList.add('visible');
    });
}
        /* 
        lightbox를 클릭하면 lightbox가 사라진다 
        */
        lightbox.addEventListener('click', ()=>{
            lightbox.classList.remove('visible');
        });

 

back to top

document.addEventListener('DOMContentLoaded',()=>{
   
    let btt = document.querySelector('#go-top');
    
    let scrollAmt = 0; // -> 전역 변수
    window.addEventListener('scroll',()=>{
    // let scrollAmt1 = document.documentElement.scrollTop;
    // let scrollAmt = window.pageYOffset; -> deplicated
    scrollAmt = window.scrollY; 
    // let scrollAmt = window.scrollY; -> 지역변수
    // console.log(scrollAmt);
    
    /*
    만약에 scrollAmt이 300보다 크다면 btt가 나타나고
    아니면 btt가 사라진다
    */
     if(scrollAmt>300){
        btt.classList.add('active');
     } else {
        btt.classList.remove('active');
     }
    });

    // 스크롤 양을 지정할 때: window.scrollTo(x,y);
    // scrollTo에는 behavior(즉시)라는게 적용되고 있음
    // 스크롤 양을 변경할 때: window.scrollBy(0,-50);
    btt.addEventListener('click', (e)=>{
        e.preventDefault();
        window.scrollTo({
            left:0,
            top:0,
            behavior:'smooth'
        });

        /*
        IE에도 작동
        // window.scrollBy(0,-20);
        let smoothScroll = setInterval(()=>{
            if(scrollAmt !== 0){
                window.scrollBy(0,-20);
            }else{
                clearInterval(smoothScroll);
            }
        },10);   
    });
        */
});
});