instagram 바닐라 자바스크립트 로그인 로직구현

개발.log·2021년 9월 19일

-요구사항-
ID : '@'가 포함되어 있어야 한다.
PW : 5글자 이상이어야 한다.
요구 사항 충족 시, 로그인 버튼 활성화 및 색상 변경

<완성코드>

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="stylesheet" href="style/login.css">
    <link rel="stylesheet" href="style/common.css">
    <title>Jinstagram</title>
</head>

<body>
    <div class="wrapper">
        <header>
            <h1>Jinstagram</h1>
        </header>
        <main>
            <input id="user-id" type="text" placeholder="전화번호,사용자 이름 또는 이메일" />
            <input id="user-password" type="password" placeholder="비밀번호" />
            <button id="login" disabled ><b>로그인</b></button>
        </main>

        <footer><a href="www.naver.com">비밀번호를 잊으셨나요?</a></footer>
    </div>
    <script src="js/login.js"></script>

</body>

</html>

css

* {
  box-sizing: border-box;
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  margin: 0px;
  padding-bottom: 4%;
}

.wrapper {
  width: 450px;
  height: 500px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: lightgray 1px solid;
  box-shadow: 10px 0px 10px rgba(0.2, 0, 0, 0.1);
}
header {
  font-family: "Lobster", cursive;
  font-size: 28px;
}

main {
  height: 520px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
input {
  height: 40px;
  width: 320px;
  margin-bottom: 10px;
  border: solid 1px lightgray;
  border-radius: 3px;
  padding-left: 14px;
  color: black;
  background-color: #fafafa;
  font-size: 15px;
}
button {
  background-color: #0095f6;
  border: #0095f6;
  color: white;
  height: 40px;
  width: 320px;
  margin-top: 21px;
  font-size: 16px;
  border-radius: 7px;
  transition: all 0.2s ease-in;
}

button:disabled {
  background-color: #c4e1fb;
}

a {
  position: relative;
  height: 100%;
  top: 65%;
  font-size: 14px;
}

.user-location {
  height: 10px;
}

javascript

let id = document.getElementById("user-id");
let password = document.getElementById("user-password");
let login = document.getElementById("login");
let checkString = "@";
password.addEventListener("keyup", checkIdPassword);
id.addEventListener("keyup", checkIdPassword);

function checkIdPassword() {
  id.value.indexOf(checkString) != -1 && password.value.length > 5
    ? (login.disabled = false)
    : (login.disabled = true);
}

처음엔 하나의 삼항연산자로 truthy면 배경색을 진하게 바꿔주고 버튼 활성화도 해줘라.
falsthy면 배경색은 연한 배경색 해주고 비활성화 해줘라.
했더니 로직이 안먹었다. 삼항연산자는 하나의 로직밖에 처리를 못하는거 같아서(?)...(삼항연산자에 익숙치 않아서 더 조사해봐야겠다)
버튼을 활성화하는 로직, 버튼색상을 바꿔주는 로직 두가지를 따로 구현해서 같은 함수안에 넣어줬는데, 중복코드가 발생해서 마음에 들지 않았다.
그래서 코드를 조금 수정했는데,

js로 로그인 버튼이 활성화 됐는지 안됐는지만 판단해서 css에서 비활성화됐을때 배경색을 바꿔주는 방식으로 하니까 중복 코드도 줄이고 간결해져서 마음에 들었다.

로그인 js는 어렵지 않게 구현했다. 오히려 난생 처음 css부터 html 구조짜는거까지 온전히 내힘으로 했기 때문에 flex사용이 조금 어려웠다.
추후에 로그인 API를 가져와서 구글 아이디로 자동 로그인하는 로직을 추가해보고싶다!

개발.log

Think Big Aim High Act Now

이전 포스트

[문제풀이]4가지 풀이로 알아본 숫자 뒤집기(음수포함)

다음 포스트

좋은 객체지향 설계의 5가지 원칙(SOLID)

2개의 댓글

SamOck

2021년 9월 24일

지나가다 코드보고 피드백 드립니다

선언한 변수가 수정되지 않게 되면 let 보다는 const로 정의해서 사용하는 습관을 들이는게 좋습니다
작성하신 코드에서 checkIdPassword 함수의 경우

function checkIdPassword() {
  login.disabled = id.value.indexOf(checkString) === -1 && password.value.length <= 5
}

이렇게 해도 좋을 것 같습니다..!

1개의 답글