JS | 바닐라JS로 위스타그램 클론코딩하기

📌목표: 바닐라 자바스크립트로 위스타그램 페이지 구현하기
1. 메인 페이지 레이아웃, 로그인 페이지 레이아웃
2. id, pw 입력 시 로그인 버튼 활성화 기능
3. id, pw validation
4. 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
5. 댓글 좋아요/삭제 기능
6. 사용자 아이디 검색 기능
7. nav 프로필 사진 클릭 시 드롭 메뉴 생성
8. 반응형 구현

👉레이아웃

---

-margin: 0 auto를 사용해서 로그인 폼이 정중앙에 위치하도록 했다.

• 메인페이지에서 미디어쿼리를 사용해서 반응형으로 구현했다. 모바일(width: 650px), 데스크탑(width: 1000px)

👉로그인 버튼 활성화

---

• email과 password의 value가 빈 문자열일 때 Sign In 버튼 비활성화하고, email과 password에 값을 입력했을 때만 Sign In 버튼의 background-color 를 black으로 변경
• email과 password가 focus 되었을 때 box-shadow 스타일을 추가함
• email 과 password의 속성에 required 추가해서 필수로 값을 입력해야만 submit이 가능하게 함.

function validate() {
  if (email.value == null || email.value == "") {
    alert("Please enter the email.");
    return false;
  } else if (!email.value.includes("@") || email.value.length < 5) {
    alert("Please enter a valid email address.");
    return false;
  } else if (password.value == null || password.value == "") {
    alert("Please enter the password.");
    return false;
  } else if (password.value.length < 6) {
    alert("Please enter a valid password");
  } else {
    alert("Welcome Back!");
    location.href = "main.html";
  }
}

👉댓글 추가 (+좋아요, 삭제)

---

• Add 버튼이나 enter 클릭 시 -> createElement를 통해서 댓글 추가
• createElement로 추가된 div에 클릭 이벤트 추가해서 좋아요와 삭제 기능 추가
• 피드 좋아요 -> 클릭 시 classList.toggle("classname")를 통해서 구현함.

👉사용자 아이디 검색 기능

---

• 사용자 아이디 정보를 담는 mock data를 배열 형태로 userArray라는 변수에 저장.
• 검색 input의 변화가 생길 때마다 search함수가 실행되도록 이벤트리스너 추가
• userArray에 filter method를 사용해서 input의 current value가 username을 포함하고 있는 요소들만 반환하도록 함
• 반환된 요소들을 map method를 사용해서 createElement("div")를 생성함
• input의 value가 빈문자열일 때 innerHTML = ""를 사용해서 사용자를 보여줄 container를 비어준다.

function searchUser() {
  if (searchInput.value !== "") {
    newArr = userArray.filter((el) =>
      el.username.toLowerCase().includes(searchInput.value.toLowerCase())
    );

    searchResult.innerHTML = "";

    newArr.map((user) => {
      let result = document.createElement("div");
      searchResult.appendChild(result);
      result.innerHTML = `<div><img src="${user.userImg}"/></div><div>${user.username}<div>${user.description}</div></div>`;
    });
  } else {
    searchResult.innerHTML = "";
  }
}

👉드롭다운 메뉴

---

• 프로필 아이콘 클릭 시 -> 드롭다운 메뉴 display: block을 가지고 있는 클래스를 토글로 만들었다.
• Sign out 클릭 시 login.html로 이동

---

✍️회고

• createElement를 통해서 만들어진 엘리먼트들에 이벤트가 반응하지 않았음... --> (createElement(div)를 변수에 저장해서 변수에 이벤트를 추가해서 해결)
• 사용자 아이디 검색에서 input에 변화가 생길 때마다 실행되는 함수로 인해서 계속해서 div가 생성되었다. 빈문자열일 때도 div가 생성되는 문제 발생..🤯 (--> 해결: 이벤트 상단에 innerHTML =""를 작성해서 이벤트가 발생하면 컨테이너를 계속해서 비어주고 새로운 요소들을 반환하도록 함!)