인스타그램 클론 코딩 후기 - Login Page

Pulan·2022년 7월 29일
1
post-thumbnail

구현 사항

  1. Login Page 레이아웃 구현
  2. id, pw 입력 시 로그인 버튼 활성화
  3. id에 '@' 포함, pw는 5글자 이상시 로그인 성공

HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Westagram</title>
    <!--* font style *-->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
      rel="stylesheet"
    />

    <!--* style css *-->
    <link rel="stylesheet" href="styles/login.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="logo">Westagram</h1>
      <form class="loginForm">
        <div class="loginCtl">
          <input
            type="text"
            class="id"
            placeholder="전화번호, 사용자 이름또는 이메일"
          />
        </div>
        <div class="loginCtl">
          <input type="password" class="password" placeholder="비밀번호" />
        </div>
        <button type="submit" class="loginBtn" disabled>로그인</button>
      </form>
      <div class="midLine">
        <div class="line"></div>
        <div class="or">
          <span>또는</span>
        </div>
        <div class="line"></div>
      </div>
      <a href="#" class="pwdFind">비밀번호를 잊으셨나요?</a>
    </div>
    <script src="./js/login.js"></script>
  </body>
</html>

CSS

@import url('./normallize.css');
@import url('./reset.css');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 400px;
  padding: 40px;
  border: 1px solid rgb(235, 235, 235);
  border-radius: 5px;
}

.logo {
  font-family: 'Lobster', cursive;
  text-align: center;
  font-size: 44px;
}

.loginForm {
  padding: 20px 10px;
}

.loginCtl {
  margin-bottom: 10px;
}

.loginCtl input {
  width: 100%;
  padding: 10px;
  border: 1px solid rgb(235, 235, 235);
  border-radius: 5px;
  font-size: 14px;
}

.loginCtl input:focus {
  border-color: rgb(175, 175, 175);
}

.loginForm button {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  color: #fff;
  background-color: #0095f6;
  border: 1px solid #0095f6;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.loginForm button[disabled] {
  background-color: rgba(0, 149, 246, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.midLine {
  display: flex;
  margin: 10px 0;
}

.line {
  flex: 1;
  height: 1px;
  background-color: rgb(235, 235, 235);
}

.or {
  margin: 0 18px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.3);
  line-height: 1px;
}

.pwdFind {
  display: block;
  margin-top: 40px;
  color: #00376b;
  text-align: center;
}

JavaScript

const $loginForm = document.querySelector('.loginForm');
const $id = document.querySelector('.id');
const $pw = document.querySelector('.password');
const $loginBtn = document.querySelector('.loginBtn');

const isValidEmail = email => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
    );
};

$loginForm.addEventListener('keyup', () => {
  $id.value.indexOf('@') !== -1 && $pw.value.length >= 5
    ? ($loginBtn.disabled = false)
    : ($loginBtn.disabled = true);
});

$loginForm.addEventListener('submit', e => {
  e.preventDefault();

  !isValidEmail($id.value)
    ? alert('ID가 잘못된 형식입니다.')
    : alert('로그인 성공!');
});

클론 코딩을 하면서 생각이 들었던 것은 백엔드와 협업해서 내가 만든 부분이 반응하는 것을 보고싶어졌다.

How can I validate an email address in JavaScript?

profile
현재 개발 중인 블로그로 내용들을 개선하면서 업데이트하고 있습니다. https://www.plu457.life/

1개의 댓글

comment-user-thumbnail
2022년 7월 29일

얼른 함께해요

답글 달기