TIL 6 // 인스타 클론 코딩 기능

app235·2020년 10월 29일
0

Instagram 기능 클론

구현할 기능


하트 모양 아이콘을 눌럿을 경우, 하트모양이 커지면서 아이콘의 색이 변하는 효과
<!--html 소스코드-->
<div class="cnt_heart"></div>
css Code
.cnt_heart{
    background-image: 
    width : 25px;
    height: 23px;
    margin-left: 15px;
    background-position: 
}

.heart_check{
    transform:scale(1.5);
    transition : .1s;
}

.cnt_red_heart{
    background-image: url('../img/main_img.png');
    background-position: -312px -370px;
}
javaScript Code

    const cnt_heart = document.querySelector('.cnt_heart');
    cnt_heart.addEventListener('click',(e)=>{
        const parent_path = e.target.parentNode.parentNode;
        const cnt_select  = parent_path.querySelector('.like_cnt_span');
        let heart_cnt = parseInt(cnt_select.innerHTML);

        cnt_heart.classList.toggle('heart_check');
        setTimeout(()=>{
            cnt_heart.classList.toggle('heart_check');
            cnt_heart.classList.toggle('cnt_red_heart');
        },100)
        console.log(cnt_heart.classList.contains('cnt_red_heart'))
        heart_cnt = cnt_heart.classList.contains('cnt_red_heart') ? heart_cnt - 1: heart_cnt + 1 ;
        cnt_select.innerHTML = heart_cnt
    });

문제점

console.log(cnt_heart.classList.contains('cnt_red_heart')); 을 출력을 하면 (false)가 출력 되었다.

원인 : setTimeout 에 설정이 된 시간이 지나고 난 후 아래의 code가 실행이 된다고 생각하였지만 그렇지 않았다. setTimeout에 10초를 넣어보니 시간이 지나지 않았음에도 아래의 코드가 실행되었다.

        cnt_heart.classList.toggle('heart_check');
        setTimeout(()=>{
            cnt_heart.classList.toggle('heart_check');
            cnt_heart.classList.toggle('cnt_red_heart');
            cnt_select.innerHTML = cnt_heart.classList.contains('cnt_red_heart') ? heart_cnt + 1: heart_cnt -1 ;
        },100);
다른 특별한 code가 없을 경우 이렇게 setTimeout안에 코드를 넣어 문제를 해결하였다.

관심 있을 만한 포스트

0개의 댓글