인스타그램 클론코딩 로그인 페이지

부트캠프 수강 중 진행한 인스타그램 클론 코딩을 다시 봅니다

 

완성

여기서는 로그인 버튼 활성화와 비활성화,

그리고 아이디 유효성 검사를 하였습니다

const idInput = document.querySelector('.inputId');
const passwordInput = document.querySelector('.inputPassword');
const disabledButton = document.querySelector('.mainBtn');

먼저 각각 ID input, Password input button에 변수를 담아줬습니다

 

ID input

idInput.addEventListener('input', () => {
    if ((idInput.value !== "") && (idInput.value.indexOf("@") !== -1)) {
      disableButtonOn();
    } else {
      disableButtonOff();
    }
  });

idinput에 이벤트리스너를 주어 기능을 구현했습니다

input이벤트를 주었으며 idinput의 value 값이 공백일 때 alert을 띄워 줄 조건과 id창에 '@' 문자열이 없을 때

로그인 버튼이 비활성화될 수 있게 if문 안에 같이 비교해 주었습니다

 

Password input

passwordInput.addEventListener('input', () => {
    if ((passwordInput.value !== "") && (passwordInput.value.length > 5)) {
      disableButtonOn();
    } else {
      disableButtonOff();
    }
  });

passwordinput도 마찬가지로 이벤트 리스너에 input 이벤트

그리고 if문안에 조건식 패스워드가 공백이 아닐 때 반대로 활성화 그리고 패스워드의 길이가 5보다 크면 로그인 버튼 활성화 그렇게 같이 조건을 비교합니다

 

disableButtonOn()

disableButtonOff()

function disableButtonOn() {
    disabledButton.disabled = false;
    disabledButton.style.opacity = "1";
    disabledButton.classList.add('cursorPointer');
  }

 function disableButtonOff() {
    disabledButton.disabled = true;
    disabledButton.style.opacity = "0.6";
    disabledButton.classList.remove('cursorPointer');
  }

버튼의 활성화와 비활성화 함수입니다 

disabled = false가 활성화

disabled = true가 비활성화입니다

style.opacity 투명도로 활성화와 비활성화를 구분해주고

마지막으로 class추가에 cursorPinter 기능을 넣어 활성화가 되었을 때 클래스가 부착

비활성화일 때 탈착방식으로 구현하였습니다

 

로그인 활성화 시 메인 페이지로 이동

function loginButtonClickPage() {
  let loginButton = document.querySelector('.mainBtn');
  loginButton.addEventListener('click', () => {
    window.location.href = "./main.html"
  })
}
loginButtonClickPage();

버튼에 이벤트 리스너를 부여하여 문서의 이동을 주었습니다

 

전체 코드. JS

// login Button 활성 / 비활성
function inputValueSpotlight() {
  const idInput = document.querySelector('.inputId');
  const passwordInput = document.querySelector('.inputPassword');
  const disabledButton = document.querySelector('.mainBtn');

  function disableButtonOn() {
    disabledButton.disabled = false;
    disabledButton.style.opacity = "1";
    disabledButton.classList.add('cursorPointer');
  }
  function disableButtonOff() {
    disabledButton.disabled = true;
    disabledButton.style.opacity = "0.6";
    disabledButton.classList.remove('cursorPointer');
  }

  idInput.addEventListener('input', () => {
    if ((idInput.value !== "") && (idInput.value.indexOf("@") !== -1)) {
      disableButtonOn();
    } else {
      disableButtonOff();
    }
  });
  passwordInput.addEventListener('input', () => {
    if ((passwordInput.value !== "") && (passwordInput.value.length > 5)) {
      disableButtonOn();
    } else {
      disableButtonOff();
    }
  });
}
inputValueSpotlight();

// login Button Click시 page 이동
function loginButtonClickPage() {
  let loginButton = document.querySelector('.mainBtn');
  loginButton.addEventListener('click', () => {
    window.location.href = "./main.html"
  })
}
loginButtonClickPage();

 

많이 어렵습니다 로그인 하나에 실제론 이보다 더 많은 기능이 들어갈 거라는 걸 이를 통해 알게 되었습니다

코드의 가독성을 위해 설계와 같이 생각해보고 짜는 게 상당히 어렵고,

간단한 기능 하나인데도 불구하고

평소의 뇌로는 1 다음 바로 5, 6을 생각하면 될 거 같지만

코드를 짤 때는 1 다음이 1.1이 되게끔 생각하는 게 아직 많이 힘듭니다