TIL 17 - instagram login 구현

crystalee·2021년 7월 15일
1

instagram

목록 보기
1/2
post-thumbnail

💻 Wecode instagram login

위코드 2주차 html,css,js 기초를 배우고 바로 instagram 클론코딩에 들어갔다.

  • id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되야하고 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로 구현되어야 한다.

❗️하나라도 input에 값을 넣지 않으면 버튼이 활성화 되지 않는다.

각각 input에 값을 넣어보니 버튼이 활성화가 되었다.

Assignment

Self Refactoring도 아직 하지 않은 날 것의 코드이다. 추후에 정리하고 비교해보자 🤗

✍️ 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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <title>Westagram login</title>
</head>
<body>
    <div class="container">
        <h1 class="logo">Westagram</h1>
        <form action="main.html">
            <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일"> class="id">
            <input type="password" placeholder="비밀번호" class="pw">
            <button class="btn_login" disabled>로그인</button>
        </form> 
        <a href="#"><span class="pw_forgot">비밀번호를 잊으셨나요?</span></a>
    </div>
</body>
<script src="js/login.js"></script>
</html>
 
 

✍️ css

body{
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
   
}
.container {
    background-color: #fff;
    border: 2px solid #dfdfdf;
    width: 400px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.logo{
    font-family: 'Lobster', cursive;
    font-size: 60px;
    color:#222222;
    padding: 50px;
}

input{
    display: block;
    width: 300px;
    height: 50px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fafafa;
    
}

input::placeholder{
    padding-left: 10px;
    
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent; } 

input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color:transparent; } 

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {  color:transparent; } 

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color:transparent; }

.btn_login{
    width: 300px;
    height: 40px;
    background-color: rgba(0,149,246,.3);
    border: 1px solid transparent;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.pw_forgot {
    color: #00376b;
    font-weight: 500;
    font-size: 18px;
    display: block;
    margin-top: 110px;
}

✍️ js

const thisIsId = document.querySelector('.id');
const thisIsPw = document.querySelector('.pw');
const thisIsButton = document.getElementsByClassName('btn_login')[0];

thisIsId.addEventListener('keyup', thisIsLogin);
thisIsPw.addEventListener('keyup', thisIsLogin);

function thisIsLogin (){
    if(thisIsId.value && thisIsPw.value){
        thisIsButton.disabled = false;
        thisIsButton.style.backgroundColor = '#0095f6';
    }else {
        thisIsButton.disabled = true;
        thisIsButton.style.backgroundColor = '#b2dffc';
    }
}
  1. 각 id,pw,button을 변수로 지정해주고
  2. id,pw를 콜백함수를 사용해 구현해준다.
  3. if문을 사용해 id 그리고 pw에 값이 들어가면 button을 활성화 하고 색을 #0095f6으로 바꿔준다.
  4. 값이 들어가지 않으면 button을 활성화하지 못하고 #b2dffc가 나온다.
  5. 그리고 id,pw의 함수 로직이 같아 함수를 분리해서 코드를 재활용 했다.

❗️마치며

처음부터 html,css,js를 혼자 구현한건 처음이여서 많이 어려웠다.😢
그래도 내가 코드를 구현한대로 만들어져서 신기하고 재밌었다. 지금은 정리되지도 않은 완전 날 것의 코드여서 나중에 이 코드를 다시 보면 많이 창피할 것 같다 😅 그래도 변화를 비교해가면서 배워나가면 뿌듯하고 좋을 것 같다 😆

profile
코린이 성장일기

0개의 댓글