📅 TIL #26

tweetBtn.onclick = function () {
  alert("트윗을 추가합니다!");

  const tweetObj = {}; // 트윗을 저장할 공간을 만든다.
  tweetObj.user = "나는 우성";
  tweetObj.message = userInputText.value;
  tweetObj.create_at = new Date().format(); // 시간 함수 미리 만들어 놓음

  DATA.unshift(tweetObj); // 맨 첫번째 트윗으로 보여주기 위해 unshift 사용

  if (DATA.length > 7) {
    // 지구 끝까지 늘어나는게 싫었음
    DATA.pop();
  }

  removeTweet(); // 미리 만들어 놓은, 모든 요소를 지우는 함수
  printComments(); // 미리 만들어 놓은, forEach를 활용해 모든 요소를 다시 불러옴

  userInputText.value = ""; // 트윗을 보내고 입력칸은 다시 공백으로 만듬
};

let listArr = []; // 필터링을 담아주기 위해 만듬

function filterList(event) {
  // 필터링 함수
  let targetUser = event.target.textContent;
  listArr = DATA.filter(el => el.user === targetUser);

  removeTweet();
  changeList(listArr); // 필터링된 요소들을 보여준다.
}

function changeList(list) {
  list.forEach(printComment); // printComment 함수안에 addfilterList() 를 실행시킴
}

function addfilterList() {
  let userList = document.querySelectorAll(".userName");
  //이름을 클릭했을 때 이벤트가 발생되야 하므로 이름을 유사배열로 만들어준다.

  for (let i = 0; i < userList.length; i++) {
    //유사배열 반복문
    userList[i].addEventListener("click", filterList); //모든요소에 이벤트 함수 부여
  }
}