instagram clone project(4)-main page(js)

js로 구현한 기능

1. 좋아요 버튼

주요 코드

contentLikeBtn.addEventListener("click", handleLikeBtn);

const handleLikeBtn = (event) => {
  const targetLikeBtn = event.target;
  targetLikeBtn.classList.toggle("like-btn-fill");
  heartbeat(targetLikeBtn);
};

const heartbeat = (targetLikeBtn) => {
  targetLikeBtn.classList.remove("heartbeat");
  targetLikeBtn.offsetWidth = targetLikeBtn.offsetWidth;
  targetLikeBtn.classList.add("heartbeat");
};

코드 설명

like 버튼을 클릭할 때마다 "like-btn-fill" class를 toggle로 넣고 뺀다. 그 때 마다 heartbeat 함수를 호출해서 heartbeat class를 초기화 하고 add하여 animation이 적용되도록 해 준다.

2. 댓글 기능

주요 코드

const handleCommentSubmit = (event) => {
  event.preventDefault();
  const comment = commentInput.value;
  if (comment) {
    addComment(comment);
    commentInput.value = "";
  }
};

const addComment = (comment) => {
//el생성해서  append하는 코드  생략
}

const delComment = (event) => {
  const targetcommentLi = event.target.parentNode.parentNode.parentNode;
  targetcommentLi.remove();
};

코드 설명

addComment 함수에서 element 생성할 때 innerHtml하면 조금 더 간단 하지만, 댓글 기능 중 삭제와 좋아요 버튼 때문에 버튼들은 createElement했다..->조금 맘에들지 않음.. 따로 함수 생성해서 event읽어도 되나 생각 해봤는데 실행은 안해봤다.ㅋㅎㅋㅎ

3. 아이디 검색기능

주요 코드

  searchInput, addEventListener("input", handleSearchinput);
  
  const initSearchInput = () => {
  searchInput.value = "";
  userIDSelectBox.classList.remove("showing");
};

const handleSearchinput = () => {
  userIDList.innerHTML = ``;
  const searchKeyword = searchInput.value;
  let searchResult = [];
  if (!searchKeyword) {
    initSearchInput();
  } else {
    searchResult = IDArr2d.filter(
      (userID) => userID[0].indexOf(searchKeyword) !== -1
    );
    if (searchResult.length > 0) makeResultElements(searchResult);
    else userIDSelectBox.classList.remove("showing");
  }
};
  

코드 설명

타이핑을 할 때마다 handleSearchinput함수가 실행됩니다. 그 때마다 filter함수를 이용해서 타이핑을 한 문자열이 있는 arr 요소만 얻어서 element로 생성 해 줍니다.

4. 프로필 메뉴

주요 코드

 profileMenuBtn.addEventListener("click", handleProfileMenu);
 window.addEventListener("click", hideProfileMenu);
 
 const handleProfileMenu = () => {
  profileMenuBox.classList.toggle("showing");
};

const hideProfileMenu = (event) => {
  console.log(event.target, profileMenuBtn);
  if (event.target !== profileMenuBtn && event.target !== profileMenuBox)
    profileMenuBox.classList.remove("showing");
};

코드 설명

프로필 메뉴 버튼을 누를 때는 메뉴가 토글되어 나타나고 다른부분을 눌렀을 때는 무조건 메뉴가 닫히도록 구현했다. 다른 부분을 눌렀을 때 이벤트를 찾는게 어려웠다. 그리고 버튼 예외처리 하는걸 좀 힘들게 떠올렸다. 이제보니 왤케고민했지..? 싶다.( 해결해 놓고 보면 항상 같은 생각이 드는듯..^^)