Javascript | 로그인 기능 구현

Web/JavaScript

Javascript | 로그인 기능 구현

일렁이는코드 2021. 10. 24. 12:50

인스타그램 클론코딩의 가장 첫번째 관문인 로그인 페이지를 만들었다.

html/css로 형태를 구현하는 것에는 크게 문제되는 것이 없었지만 Javascript의 dom형태로 기능을 구현하는 것이 처음이라 많이 막혔지만 해결방식을 잘 정립해두고 배운 개념, 모르는 개념을 검색하면서 찾아내어 첫 로그인 페이지를 완성했다.

구현 기능

DOM으로 html에 접근하고
1. id에 @가 포함된 이메일 형식의 문자를 입력했을 때 2. 비밀번호를 5자 이상 입력했을 때를
동시에 충족했을 때 로그인 버튼이 활성화되면서 버튼을 클릭하면 main페이지로 이동하게 된다.

⭐Key Point

문자열의 길이 파악
"@"를 찾아내는 메소드
로그인 버튼 활성화 비활성화 기능 + 스타일 속성 변경
다른 링크로 이동

Output

Code

🥕 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">
    <title>YestagraM</title>
    <link rel="stylesheet" type="text/css" href="./style/login.css">
    <link rel="stylesheet" type="text/css" href="./style/common.css">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
    <article>
        <div class = "login_wrapper">
            <div class="login_logo">Yestagram</div>
            <form class="login_form">
                <input id="LOGIN_ID" class = "login_text" type="text" name="id" placeholder="전화번호, 사용자 이름 또는 이메일">
                <input  id="LOGIN_PW" class = "login_text" type="password" name="id" placeholder="비밀번호">
                <button id="LOGIN_BTN" class = "login_btn" type="button" disabled>로그인</button>
            </form>
            <a class = "login_bottom" href="" >비밀번호를 잊으셨나요?</a>
        </div>
    </article>
    <script src="./js/login.js" defer=""></script>
</body>
</html>

🥕 CSS

body{
    background-color:#FAFAFA;
    margin: 0px;
    color: #262626;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color:#262626;
}

.login_wrapper{
    position:absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:350px;
    height:380px;
    top:50%;
    left:50%;
    margin: -175px 0px 0px -190px;
    background-color:white;
    border: 1px solid #DBDBDB;
}

.login_logo{
    margin :30px 0 30px 0;
    color:#262626;
    font-family: 'Lobster', cursive;
    font-size: 40px;
    font-weight: 100px;
}

.login_form{
    display:flex;
    flex-direction: column;
    width:280px;
    margin-top:10px;
}

.login_text{
    width:100%;
    height:40px;
    margin: 3px 0 3px 0 ;
    padding: 0 10px 0 10px;
    background-color:#FAFAFA;
    border: 1px solid #DBDBDB;
    border-radius: 3px;
}

.login_text:focus{
    outline: 1px solid #a8a8a8;
}

.login_text::placeholder{
    color:#8E8E8E;
}

.login_text::value{
    color:#262626;
}

.login_btn{
    width:100%;
    height:33px;
    margin: 10px 0 5px 0;
    color:white;
    background-color: #C0DFFD;
    border-radius: 5px;
    border-style: none;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.login_bottom{
    margin-top: 65px;
    color:#01376A;
    font-size: 13px;
}

🥕 JavaScript

"use strict";

const loginId = document.getElementById('LOGIN_ID');
const loginPw = document.getElementById('LOGIN_PW');
const loginBtn = document.getElementById('LOGIN_BTN');

function color() {
    if((loginId.value.length>0 && loginId.value.indexOf("@")!==-1) 
        && loginPw.value.length>=5){
        loginBtn.style.backgroundColor = "#0095F6";
        loginBtn.disabled = false;
    }else{
        loginBtn.style.backgroundColor = "#C0DFFD";
        loginBtn.disabled = true;
    }
}

function moveToMain(){
    location.replace("./main.html");
}

loginId.addEventListener('keyup', color);
loginPw.addEventListener('keyup', color);
loginBtn.addEventListener('click',moveToMain);

"use strict";
안전한 코딩을 위해 js 파일 상단에 항상 써주기!
document.getElementById("LOGIN_ID")
태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수
function color()
유효성 검사 후 로그인 버튼의 색상 변경 + 버튼 비활성화 활성화 설정
function moveToMain()
다른 링크로 이동
.addEventListener(event,함수명)
document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용

저작자표시 비영리