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;
  }
}

setIntervval함수로 배열에 저장한 사진을 index를 이용해서 변경시키는 코드를 작성했다.

<아쉬운점>

- fade in 못 넣었다...fade in 넣고 싶어서 별 시도를 다해봤다.

1. transition 이건 지금 같은 경우에 넣는게 아닌거 같음
2. keyframe 생성해서 넣기 -> 첫 사진에만 적용
3. key frame 생성해서 animation 넣는 class를 따로생성 후 classList.add()함
   ->첫 번째 사진 뒷부분에만 적용됨
4. 클래스가 적용될때 만 animtion되는 건가 해서 classList.remove()도 해봄
   ->안됨
5. 포기

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 다시 정리하기