40번 개발일지(대구AI스쿨 76일차)

22.07.07

어제 하루종일 감을 못잡고 있다가 여러 영상들을 보다가 resoft 홈페이지에 있는 코드를 가져와 비슷한 방식으로 만들어봤다. 그랬더니 1217px에서는 client img 개수와 버튼 기능을 구현됐다. 하지만 940px에서는 1217px의 값들이 적용되어 있는지 제대로 나오지 않았다.

1217px일 때의 client img 배치와 버튼 기능 구현

    if(window.matchMedia("screen and (max-width: 1217px)").matches) {
        let visiArray = [];
        visiArray = array.slice(0, 8);
        visiArray = visiArray.concat(array.slice(8, 16).reverse());
        visiArray = visiArray.concat(array.slice(16, 24));
        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(24, 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";
        });
    }

총평

• 940px일 때 img 배치와 애니메이션, 버튼 기능 구현만 하면 client 파트는 마무리 될 것 같다. 이상없이 동작한다면 코드를 보기 좋게 다듬고 다른 분들 파트도 같이 봐야겠다.