instagram 게시물 좋아요 기능구현

윤수민·2022년 10월 30일
0

클론코딩

목록 보기
2/2

#1 기능구현을 위한 분석

내가 처음했던생각 : 좋아요 기능을 구현하기 위해서 게시물의 좋아요 버튼을 누르면 검은색 테두리의 비어있는 하트가 빨간색이 꽉찬 하트로 변함과 동시에 좋아요 숫자가 올라가겠금 로직을 짜봐야 겠다고 생각했고 그대로 실행하였다.

위의 사진이 게시물의 기본적인 레이아웃이고 왼쪽 하단의 하트버튼을 누르면 하트의 색상이 바뀌고 좋아요 갯수가 바뀌게끔 로직을 작성 하였다.

#2 기능 구현

function clickEvent2() {
  if (lickButton1.classList.value == "hart_button_1") {
    hartIcon1.style.opacity = 0;
    lickButton1.classList.remove("hart_button_1");
    lickButton1.classList.add("red_hart_1");
    lieckr1.innerText = "9135명";
  } else {
    hartIcon1.style.opacity = 1;
    lickButton1.classList.remove("red_hart_1");
    lickButton1.classList.add("hart_button_1");
    lieckr1.innerText = "9134명";
  }
}
lickButton1.addEventListener("click", clickEvent2);


위의 이벤트가 정상적으로 작동하는걸 확인할수 있다.

profile
안녕하세요!

0개의 댓글