예전 버전인 인스타그램 로그인 페이지를 약간의 유효성 검사를 넣어서 로그인 할수 있게 구현해봤습니다.
부족하지만 코드들을 보면서 분석아닌 분석과 생각들을 적어보겠습니다.

기술

• HTML
• CSS
• JavaScript

구현사황

• 예전 인스타그램 로그인 페이지 구현
• 로그인 유효성 검사 -> 아이디 @ 포함 비밀번호 5자리 이상 일때 로그인버튼 활성화 및 버튼 색 변경

HTML 코드

<main class="main-box">
    <div class ="container">
      <span class="logo-text">Sunstagram</span>
      <input type="text" id="id-email" placeholder="전화번호, 사용자 이름 또는 이메일" />
      <input type="password" id="password" placeholder="비밀번호" />
      <button type="button" onclick="location.href='main.html'" class="button button-off" id="login-button" disabled>로그인</button>
      <div class="validity">아이디 또는 비밀번호가 잘못 입력 되어 있습니다.</div>
      <a href="">비밀번호를 잊으셨나요?</a>
    </div>
  </main>

HTML코드만 작성하면 위에 사진처럼 만들어 집니다.
아래에 어떤 순서로 코드들을 적었는지 봐보겠습니다.

• CSS를 편하게 적용할수 있도록 모든 태그들을 div로 묶어줬습니다.
• 모든 태그를 묶은div에 Flex 를 줘서 세로로 정렬 한다 생각하고 태그들을 순서대로 입력합니다.

CSS 코드

.main-box{
  display: flex;
  justify-content: center;
  margin-top: 6%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 380px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(219, 219, 219);
}

.logo-text {
  margin-top: -70px;
  margin-bottom: 40px;
  font-family: 'Lobster', cursive;
  font-size: 42px;
  font-weight:bolder;
}

input {
  width: 270px;
  height: 37px;
  margin-bottom: 7px;
  padding-left: 8px;
  color: rgb(142, 142, 142);
  outline-style: none;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 4px;
  background-color: rgb(250, 250, 250);
  font-size: 12px;
}

.button {
  width: 270px;
  height: 30px;
  margin: 7px 0px;
  color: white;
  background-color: #0095f6;
  border: 0px solid;
  border-radius: 5px;
}

.button-off {
  background-color: #b9dffc;
  cursor: not-allowed;
}

.container>div {
  font-size: 13px;
  font-weight: 400;
}

.validity {
  display: none;
}


a {
  position: relative;
  bottom: -80px;
  font-size: 12px;
  text-decoration: none;
}

위 사진은 HTML과 CSS만 적용 시킨 화면입니다

편하게 사용 가능한 display : flex 를 사용할려고 노력을 많이 했습니다.
main-box에 flex justify-content: center를 줘서 가운데로 정렬 시켰습니다.
로고 텍스트 아이디 비밀번호칸 버튼 들을 품고 있는 container에 flex를 주고 flex-direction: column 적용시켜 세로로 정렬 했습니다.

JavaScript 코드

const button = document.getElementById('login-button');
const idIn = document.getElementById('id-email');
const passwordIn = document.getElementById('password');
const validity = document.getElementsByClassName("validity")[0]
const container = document.getElementsByClassName("container")[0]

// id에 @ password 5자이상 유효성 검사 및 버튼활성화
function login() {
  const id= idIn.value
  const password = passwordIn.value
  if (id.includes("@") && (password.length >= 5)) {
    button.classList.remove("button-off")
    button.disabled = false;
    validity.style.display = 'none';
    } else {
    button.classList.add("button-off")
    button.disabled = true;
    validity.style.display = 'block';
  }
}
// 엔터 치면 버튼 클릭
function enter(e) {
  if(e.keyCode == 13) {
    button.click();
  }
}

container.addEventListener('keyup',login);
// idIn.addEventListener('keyup',login);
container.addEventListener('keypress',enter);
// idIn.addEventListener('keypress',enter);

• class 와 id 명으로 로그인버튼, 아이디, 비밀번호, 인풋창을 지정해놓고 로그인이라는 함수 안에
  id칸에 @ 와 비밀번호 칸이 5자리 이상을 확인하는 조건문을 넣음
• 전부 맞으면 클래스명button-off 을 삭제,disabled 에false 값을 줘서 버튼 활성화
• 아이디 또는 비밀번호가 잘못 입력 되어 있습니다. 가 들어 있는 div태그를display : none을 적용
• 그외에 조건이 성사되지 않으면 전부 반대로 해주어 유효성 검사 함수를 넣어줌.
• 엔터치면 버튼을 클릭하는 함수 enter을 넣어줌

짧은 회고

작은 로그인페이지를 클론해보면서 그래도 익숙하지 않았던 flex 개념도 다시 잡고 이벤트를 넣어보는걸 처음해보면서 어떤식으로 적용되는지 알아 갈수있어서 좋은 경험이였다고 생각을 한다. 다음 메인화면에 대해 글을 쓸때는 좀더 정리되고 내가 어떤 생각을하면서 이런 코드를 했는지 적어봐야 겠다.