인스타그램 클론 코딩 리뷰 (1)

meow·2020년 8월 24일

Project

목록 보기

6/9

인스타그램의 HTML, CSS를 클론하고, 간단한 이벤트함수를 자바스크립트로 구현했다. 초반에는 Flexbox 개념이 생소하여 다소 어려움을 느꼈지만, 디자인 작업을 하듯 재미있게 한 코딩작업이었다. 인스타그램의 페이지 두개를 구현했다. 로그인 화면과 메인 화면.

로그인 페이지

요구된 자바스크립트 이벤트는 ID, Password 인풋에 각각 한글자 이상 써야 버튼이 활성화 되도록 하는 것이었다. (버튼을 연한 파란색에서 활성화되면 진한 파란색으로 변화시키기)

Github : https://github.com/MiaJLee/westagram
Page Link : https://miajlee.github.io/westagram/login

login.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Instagram</title>
    <link href="style/common.css" rel="stylesheet" type="text/css" />
    <link href="style/login.css" rel="stylesheet" type="text/css" />
    <!-- favicon -->
    <link rel="icon" href="img/favicon.png">
    <link rel="instagram-icon" href="img/favicon.png">
  </head>
  <body>
    <div class="container">
      <img class="logo_instagram" src="img/logo_text.png" alt="instagram_logo">
      <input type="text" class="input_login" name="userID" id="userID" placeholder="전화번호, 사용자 이름 또는 이메일">
      <input type="password" class="input_login" name="userPW" id="userPW" placeholder="비밀번호">
      <a href="#none"><button id="btn_login" disabled>로그인</button></a>
      <span class="button_forgot">비밀번호를 잊으셨나요?</span>
    </div>
    <script src="js/login.js"></script>
  </body>
</html>

common.css

* {
    box-sizing: border-box;
    font-family: 'helvetica neue', 'Apple SD Gothic Neo', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #fafafa;
    padding: 0;
    margin: 0;
}
p, span {
    font-size: 14px;
}

login.css

.container {
    width: 350px;
    height: 380px;
    margin: 100px auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    background-color: #fff;
    border: 1px solid #DBDBDB;
}
img.logo_instagram {
    align-self: center;
    width: 175px;
    margin: 35px 0;
}
.input_login {
    width: 270px;
    height: 40px;
    margin: 3px auto;
    padding: 0 10px;
    display: block;
    background-color: #fafafa;
    border: 1px solid #DBDBDB;
    border-radius: 3px;
    font-size: 14px;
}
.input_login::placeholder {
    font-size: 12px;
    color: #8e8e8e;    
}
.input_login:focus {
    border: 1px solid #8a8a8a;
    outline: none;
}
#btn_login {
    width: 268px;
    height: 30px;
    margin: 13px auto;
    background-color: #0095f6;
    border: none;
    border-radius: 3px;
    color: white;
    font-size: 14px;
    font-weight: 600;
}
#btn_login:disabled {
    background-color: #B9DFFC;
}
#btn_login:disabled:hover {
    cursor: default;
}
#btn_login:enabled:hover {
    cursor: pointer;
}
#btn_login:focus {
    outline: none;
}
a {
    cursor: default;
}
.button_forgot {
    color : #00366B;
    align-self: center;
    font-size: 12px;
    margin-top: 70px;
}
.button_forgot:hover {
    cursor: pointer;
}

login.js

const idInput = document.getElementById('userID');
const pwInput = document.getElementById('userPW');
const loginBtn = document.getElementById('btn_login');
const linkToMain = document.getElementsByTagName('a')[0];

idInput.addEventListener('keyup', function(event) {
    if (idInput.value && pwInput.value) {
        loginBtn.disabled = false;
        linkToMain.href = "file:///Users/MiaJLee/Desktop/WeCode/westagram/main.html";
    }
    else {
        loginBtn.disabled = true;
        linkToMain.href = "#none";
    }
})

pwInput.addEventListener('keyup', function(event) {
    if (idInput.value && pwInput.value) {
        loginBtn.disabled = false;
        linkToMain.href = "file:///Users/MiaJLee/Desktop/WeCode/westagram/main.html";
    }
    else {
        loginBtn.disabled = true;
        linkToMain.href = "#none";
    }
})

document.addEventListener('keyup', function(event) {
    if (event.keyCode === 13) {
        document.getElementById("btn_login").click();
    }
})

자바스크립트 간단 리뷰 💥
단순히 로그인 버튼의 색상만을 바꾸지 않고 disabled라는 css 클래스를 부여하여 비활성화되는 값을 부여하였다. 또한 버튼이 활성화된 경우, main.html로 연결되도록 버튼의 a 태그 href 속성에 링크 값을 부여하였다. 버튼을 클릭하지 않아도, enter 키를 누르는 경우 버튼을 누른것과 같은 결과가 나타난다.

meow

🌙｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ、ヽ｀｀、ヽ｀、ヽヽ 🚶‍♀ ヽ｀｀ヽ｀｀、ヽ｀、