41번 개발일지(대구AI스쿨 77일차)

22.07.08

940px일 때 애니메이션과 버튼 기능을 구현했다.

let width940 = function() {
    const itemList = document.querySelectorAll(".client ul li");
    let array = [];
    for(let i = 0; i < itemList.length; i++) {
        array.push(itemList[i]);
    }
    
    if(window.matchMedia("screen and (max-width: 940px)").matches) {
        let visiArray = [];
        visiArray = array.slice(0, 12);
        let second = 0;
        for(let i = 0; i < visiArray.length; i++) {
            second = second + 0.1;
            visiArray[i].style.animationDelay = second + "s";
        }

        let more = document.getElementsByClassName("more-btn")[0];
        more.addEventListener("click", function(e) {
            e.preventDefault();
            let hiddenArray = [];
            hiddenArray = array.slice(12, 27);

            let hSecond = 0;
            for(let i = 0; i < hiddenArray.length; i++) {
                hSecond = hSecond + 0.1;
                hiddenArray[i].style.animationDelay = hSecond + "s";
                hiddenArray[i].style.display = "block";
            }
            more.style.display = "none";
        });
    }
}

총평

리소프트 홈페이지와 어찌되었든 똑같은 동작을 하게 만들었다. jQuery와 wow js를 사용하지 않고 만들어 보고 싶어서 만들긴 했는데 다듬어야할 부분도 있어보이고 다르게 구현할 수도 있을 것 같다. 그리고 Javascript에 대해서 더 깊게 이해해야할 것 같다는 생각이 많이 들었다.