복기하기 위해 가져온 자바스크립트 코드

코드 원본으로 복기 계속 하도록 하자

    'use strict';

    // Make navbar transparent when it is on the top

    const navbar = document.querySelector('#navbar');
    const navbarHeight = navbar.getBoundingClientRect().height;

    document.addEventListener('scroll', () => {
        if(window.scrollY > navbarHeight){
            navbar.classList.add('navbar--dark');
        } else {
           navbar.classList.remove('navbar--dark'); 
        }
    });

    // Handle scrolling when tapping on the navbar menu

    const navbarMenu = document.querySelector('.navbar__menu');
    navbarMenu.addEventListener('click', (event) => {

        const link = event.target.dataset.link;

        if(link == null){ //null은 undefined도 포함한다.
            return;
        }
        navbarMenu.classList.remove('open');

        scrollIntoView(link);

    })

    // Navbar toggle button for small screen
    const navbarToggleBtn = document.querySelector('.navbar__toggle-btn');
    navbarToggleBtn.addEventListener('click', () => {
        navbarMenu.classList.toggle('open');
    });


    // Handle click on "contact me" button on home

    const homeContact = document.querySelector('.home__contact');
    homeContact.addEventListener('click', () => {
        scrollIntoView('#contact');
    })

    function scrollIntoView(selector){
        const scrollTo = document.querySelector(selector);
        scrollTo.scrollIntoView({behavior: 'smooth'});
    }

    // Make home slowly fade to transparent as the wondow scrolls down

    const home = document.querySelector('.home__container');
    const homeHeight = home.getBoundingClientRect().height;

    document.addEventListener('scroll', () => {
       home.style.opacity = 1 - window.scrollY / homeHeight;
    });

    // Show "arrow up" button when scrolling down

    const arrowUp = document.querySelector('.arrow-up');
    document.addEventListener('scroll', () => {
        if(window.scrollY > homeHeight / 2){
            arrowUp.classList.add('visible');
        }else{
            arrowUp.classList.remove('visible');
        }
    })

    // Handle click on the "arrow up" button

    arrowUp.addEventListener('click',() => {
        scrollIntoView('#home');
    })

    // projects

    const workBtnContainer = document.querySelector('.work__categories');
    const projectContainer = document.querySelector('.work__projects');
    const projects = document.querySelectorAll('.project');

    workBtnContainer.addEventListener('click', (e) => {
        const filter = e.target.dataset.filter || e.target.parentNode.dataset.filter;
        // 이벤트 값은 .work__categories에 들어가는데 왜 button과 span에 들어가야하는걸 filter에 정의해줬냐면
        // addEventListener를 click으로 해놨기때문에 애초에 클릭이 되야 이벤트가 실행됨.
        // 따라서 .work__categories에 지정해뒀어도 이벤트 값을 받을 수 있는건 button과 span두개 뿐이니
        // 두개에 상응하는 공식을 적어둔거임 
        // Remove selection form the previous itme and select the new one
        const active = document.querySelector('.categories__btn.selected');
        active.classList.remove('selected'); 
        const target = e.target.nodeName === 'BUTTON' ? e.target : e.target.parentNode;
        target.classList.add('selected');

        projectContainer.classList.add('anim-out');

        setTimeout(() => {
            projects.forEach((project)=>{
                // project는 모든(querySelectAll).project를 칭함.
                // 따라서 foreach()는 모든 .project마다 돌면서 할당된 값을 실행하고
                // ()실행값을 (project)라고 지칭해 if문을 통해 실행값이
                // *거나 data-filter과 data-type의 값이 똑같은 것만
                // invisible을 삭제시켜주고, 똑같지 않은것은 invisible을
                // 추가시켜줌.
            if(filter === '*' || filter === project.dataset.type){
                project.classList.remove('invisible');
            }else{
                project.classList.add('invisible');
            }
        });
            projectContainer.classList.remove('anim-out');
        }, 150);


        if(filter == null){
            return;
        }

    });
    ```