login.html
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/login.css">
<title>Westagram Login</title>
</head>
<body>
<div class="loginWrapper">
<div class="login">
<div class="logoWrapper">
<div class="logo">Westagram</div>
</div>
<div class="input">
<input type="text" class="inputId" placeholder="전화번호, 사용자 이름 또는 이메일">
<input type="password" class="inputPwd" placeholder="비밀번호">
<button class="loginBtn">로그인</button>
</div>
<footer class="forgotPwd"><a href="#">비밀번호를 잊으셨나요?</a></footer>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>src/login.css
a {
text-decoration: none;
color: white;
}
.loginWrapper {
display: flex;
justify-content: center;
}
.login {
width: 360px;
height: 400px;
border: 1px solid #e6e6e6;
margin-top: 30px;
}
.login .logoWrapper {
display: flex;
justify-content: center;
}
.login .logoWrapper .logo {
font-family: "Lobster", cursive;
color: #262626;
width: 175px;
font-size: 38px;
margin: 22px 86.5px 12px;
}
.input {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 24px;
}
.input * {
width: 258px;
height: 36px;
margin: 9px 8px 7px 8px;
}
.input input {
background-color: #fafafa;
border: 1px solid #f3f3f3;
border-radius: 5px;
padding-left: 10px;
}
.input input:focus {
outline: none;
border: 1px solid darkgray;
}
.input input::placeholder {
font-size: 12px;
}
.input input::-ms-value {
font-size: 12px;
text-indent: 5px;
}
.loginBtn {
width: 258px;
height: 36px;
background-color: #c4e1fb;
border: 1px solid transparent;
border-radius: 6px;
color: white;
font-size: 18px;
}
.login .loginBtn.active {
background-color: #0095f6;
}
.loginBtn.active:hover {
cursor: pointer;
}
.forgotPwd {
display: flex;
justify-content: center;
margin-top: 90px;
}
.forgotPwd a {
text-decoration: none;
color: #345e87;
}js/login.js
const inputId = document.querySelector(".inputId");
const inputPwd = document.querySelector(".inputPwd");
const loginBtn = document.querySelector(".loginBtn");
let idAndPwd = [false, false];
// function declaration
function activeBtn() {
if (idAndPwd[0] && idAndPwd[1]) {
loginBtn.classList.add("active");
} else {
loginBtn.classList.remove("active");
}
}
function handleValidInandPwd(idx, el) {
idAndPwd[idx] = el.value;
if (!idAndPwd[idx]) {
idAndPwd[idx] = false;
}
}
function init() {
inputId.addEventListener("input", () => {
handleValidInandPwd(0, inputId);
activeBtn();
});
inputPwd.addEventListener("input", () => {
handleValidInandPwd(1, inputPwd);
activeBtn();
});
loginBtn.addEventListener("click", () => {
if (loginBtn.className.includes("active")) {
location.href = "main.html";
}
});
}
init();생각나는 기능은 깃헙에 계속 업데이트 예정... 궁금하시면 github/eojine94 커몬~!
Junior FE Developer