구현 사항
- Login Page 레이아웃 구현
- id, pw 입력 시 로그인 버튼 활성화
- 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?
현재 개발 중인 블로그로 내용들을 개선하면서 업데이트하고 있습니다. https://www.plu457.life/