instagram clone project(2)-login page(js)
js로 구현할 기능
1. 폰 화면 주기적으로 변경되는 기능
2. ID, PW 입력시 input 박스 변하는 기능
3. ID, PW input 모두 채워질 경우 로그인 btn 색 바뀌는 기능
구현한 모습
코드리뷰
1. 폰화면 주기적으로 변경되는 기능
<코드>
setInterval(changeImg, 2000);
function changeImg() {
let phoneScreen__Imgs = [
"https://www.instagram.com/static/images/homepage/screenshot1-2x.jpg/9144d6673849.jpg",
"https://www.instagram.com/static/images/homepage/screenshot2-2x.jpg/177140221987.jpg",
"https://www.instagram.com/static/images/homepage/screenshot3-2x.jpg/ff2c097a681e.jpg",
"https://www.instagram.com/static/images/homepage/screenshot4-2x.jpg/b27a108592d8.jpg",
"https://www.instagram.com/static/images/homepage/screenshot5-2x.jpg/5e04169b9308.jpg",
];
phoneScreen.src = phoneScreen__Imgs[phoneScreen__Idx];
phoneScreen__Idx = phoneScreen__Idx + 1;
if (phoneScreen__Idx >= phoneScreen__Imgs.length) {
phoneScreen__Idx = 0;
}
}
setInterval(changeImg, 2000);
function changeImg() {
let phoneScreen__Imgs = [
"https://www.instagram.com/static/images/homepage/screenshot1-2x.jpg/9144d6673849.jpg",
"https://www.instagram.com/static/images/homepage/screenshot2-2x.jpg/177140221987.jpg",
"https://www.instagram.com/static/images/homepage/screenshot3-2x.jpg/ff2c097a681e.jpg",
"https://www.instagram.com/static/images/homepage/screenshot4-2x.jpg/b27a108592d8.jpg",
"https://www.instagram.com/static/images/homepage/screenshot5-2x.jpg/5e04169b9308.jpg",
];
phoneScreen.src = phoneScreen__Imgs[phoneScreen__Idx];
phoneScreen__Idx = phoneScreen__Idx + 1;
if (phoneScreen__Idx >= phoneScreen__Imgs.length) {
phoneScreen__Idx = 0;
}
}
setIntervval함수로 배열에 저장한 사진을 index를 이용해서 변경시키는 코드를 작성했다.
<아쉬운점>
- fade in 못 넣었다...fade in 넣고 싶어서 별 시도를 다해봤다.
- transition 이건 지금 같은 경우에 넣는게 아닌거 같음
- keyframe 생성해서 넣기 -> 첫 사진에만 적용
- key frame 생성해서 animation 넣는 class를 따로생성 후 classList.add()함
->첫 번째 사진 뒷부분에만 적용됨 - 클래스가 적용될때 만 animtion되는 건가 해서 classList.remove()도 해봄
->안됨 - 포기
2. ID, PW 입력시 placeholder 변하는 기능
<코드>
loginForm.addEventListener("input", handleInput);//form에 input eventListner추가
//form에 input event일어났을 때 실행할 함수
function handleInput(event) {
const inputTarget = event.target;//input event일어난 target element
//input event일어난 target의 place holder(span)
const inputTargetPlaceholder = inputTarget.nextElementSibling;
if (inputTarget.value) {//만약 value 있으면
//placeholder(span)&value 위치 바꾸는 함수실행
upPlaceholderANDdownText(inputTarget, inputTargetPlaceholder);
} else {//value 없으면
//placeholder(span)&value 위치 원래대로 바꾸는 함수실행
downPlaceholder(inputTarget, inputTargetPlaceholder);
}
}
function upPlaceholderANDdownText(input, placeholder) {
placeholder.classList.add(`${placeholder.classList[0]}Upper`);
input.classList.add("downText");
}
function downPlaceholder(input, placeholder) {
placeholder.classList.remove(`${placeholder.classList[0]}Upper`);
input.classList.remove("downText");
}
<힘들었던 점>
- placeHolder style 한정됨
placeholder를 위로올리고, 글씨를 썼을 때도 placeholder가 계속 있어야 했는데 그게 안됐다. 그래서 span을 넣고, position : absolute 속성을 줘서 placeholder 처럼 보일 수 있도록 만들어 줬다. 이렇게 하니까 transition도 줄 수 있어서 좋았다.
- 기능 함수화 하기
ID랑PW에서 거의 같은 기능을 하는 코드를 짯는다. event가 발생 했을 때 바뀌어야 하는 el이 다르니까 어떻게 해야할 지 몰랐는데 .nextElementSibling선택자가 아주 큰 도움을 주었다.
3. ID, PW input 모두 채워질 경우 로그인 btn 색 바뀌는 기능
<코드>
loginForm.addEventListener("input", handleInput);//form에 input eventListner추가
//form에 input event일어났을 때 실행할 함수
function handleInput(event) {
const inputTarget = event.target;
const inputTargetPlaceholder = inputTarget.nextElementSibling;
if (inputTarget.value) {//만약 value 있으면
upPlaceholderANDdownText(inputTarget, inputTargetPlaceholder);
isFill();//ID, PW input모두에 value 있는지 확인하는 함수 실행
} else {//value 없으면
downPlaceholder(inputTarget, inputTargetPlaceholder);
isFill();//ID, PW input모두에 value 있는지 확인하는 함수 실행
}
}
function isFill() {
if (loginInputs[0].value && loginInputs[1].value) {//ID, PW input모두에 value 있다면
loginBtn.classList.remove("btn-disabled");//btn비활성화 class 지움
} else {
loginBtn.classList.add("btn-disabled");//btn비활성화 class add
}
}
과제
- 나에게 아주X100 도움을 준 DOM 선택자 벨로그 정리
- animation, transition 다시 정리하기
Author And Source
이 문제에 관하여(instagram clone project(2)-login page(js)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@yerin719/instagram-clone-project2-login-pagejs
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(instagram clone project(2)-login page(js)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yerin719/instagram-clone-project2-login-pagejs저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)