Toy Project 04 인스타그램 클론..!

마지막 바닐라자바스크립트 코딩이 될 것 같은 인스타 클론..!

✨ 로그인 페이지 만들기 ✨

✏️ 로그인 버튼 활성화하기

const loginForm = document.querySelector('.loginForm');
const inputLogin = document.querySelectorAll('input');
const inputID = document.querySelectorAll('input')[0];
const inputPW = document.querySelectorAll('input')[1];
const loginBtn = document.querySelector('.login.btn');

function active() {
    if (inputID.value && inputPW.value) {
        loginBtn.removeAttribute('disabled');
        loginBtn.classList.add('active');  
    } else {
        loginBtn.setAttribute('disabled', 'disabled');
        loginBtn.classList.remove('active')
    }
};

inputID.addEventListener('input', active);
inputPW.addEventListener('input', active);

• removeAttribute와 setAttribute를 사용하여 조건에 따라 disabled를 주었다.
  -> 처음에 toggleAttribute를 사용했다가, input event에 걸어놓아서 값이 입력될때마다 활성화와 비활성화가 반복되었다.

• 처음에는 로그인 버튼색상을 inline 스타일 속성으로 변경하였는데, 이는 html과 css를 분리하지 않는 방법이므로 class를 추가하는 방법으로 수정했다.

• 현재는 각각의 input요소에 addEventListner를 걸어 놓아서 두번 함수를 실행시켰으나, 반복문을 사용해서 중복을 줄일 수 있다. -> 후에 form에 event를 걸어서 더 간결하게 리펙토링되었다.

✏️ label 위치 옮기기

const descriptionID = document.querySelectorAll('.form-description')[0];
const descriptionPW = document.querySelectorAll('.form-description')[1];

function moveToUpside(inputType, descriptionType) {
    if (inputType.value) {
        descriptionType.classList.add('focused');
        inputType.classList.add('entered');
    } else {
        descriptionType.classList.remove('focused');
        inputType.classList.remove('entered');
    }
};

inputID.addEventListener('input', () => {moveToUpside(inputID, descriptionID)});

• input마다 addEventListner를 따로 부여했다가 -> 같은 구조여서 따로 함수로 빼고싶어서 -> moveToUpside함수를 재정의해서 id 또는 pw를 인자를 다시 받아서 실행했다가..! 다시.. 바꿈.. 나는 무엇을 하는가..