📌목표: 바닐라 자바스크립트로 위스타그램 페이지 구현하기
1. 메인 페이지 레이아웃, 로그인 페이지 레이아웃
2. id, pw 입력 시 로그인 버튼 활성화 기능
3. id, pw validation
4. 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
5. 댓글 좋아요/삭제 기능
6. 사용자 아이디 검색 기능
7. nav 프로필 사진 클릭 시 드롭 메뉴 생성
8. 반응형 구현
-margin: 0 auto
를 사용해서 로그인 폼이 정중앙에 위치하도록 했다.
width: 650px
), 데스크탑(width: 1000px
)value
가 빈 문자열일 때 Sign In 버튼
비활성화하고, email과 password에 값을 입력했을 때만 Sign In 버튼
의 background-color
를 black
으로 변경focus
되었을 때 box-shadow
스타일을 추가함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")
를 통해서 구현함.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
을 가지고 있는 클래스를 토글로 만들었다.login.html
로 이동createElement(div)
를 변수에 저장해서 변수에 이벤트를 추가해서 해결)input
에 변화가 생길 때마다 실행되는 함수로 인해서 계속해서 div
가 생성되었다. 빈문자열일 때도 div
가 생성되는 문제 발생..🤯 (--> 해결: 이벤트 상단에 innerHTML =""
를 작성해서 이벤트가 발생하면 컨테이너를 계속해서 비어주고 새로운 요소들을 반환하도록 함!)