위코드 2주차 html,css,js 기초를 배우고 바로 instagram 클론코딩에 들어갔다.
- id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되야하고 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로 구현되어야 한다.
❗️하나라도 input에 값을 넣지 않으면 버튼이 활성화 되지 않는다.
각각 input에 값을 넣어보니 버튼이 활성화가 되었다.
Self Refactoring도 아직 하지 않은 날 것의 코드이다. 추후에 정리하고 비교해보자 🤗
<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>
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;
}
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';
}
}
- 각 id,pw,button을 변수로 지정해주고
- id,pw를 콜백함수를 사용해 구현해준다.
- if문을 사용해 id 그리고 pw에 값이 들어가면 button을 활성화 하고 색을 #0095f6으로 바꿔준다.
- 값이 들어가지 않으면 button을 활성화하지 못하고 #b2dffc가 나온다.
- 그리고 id,pw의 함수 로직이 같아 함수를 분리해서 코드를 재활용 했다.
처음부터 html,css,js를 혼자 구현한건 처음이여서 많이 어려웠다.😢
그래도 내가 코드를 구현한대로 만들어져서 신기하고 재밌었다. 지금은 정리되지도 않은 완전 날 것의 코드여서 나중에 이 코드를 다시 보면 많이 창피할 것 같다 😅 그래도 변화를 비교해가면서 배워나가면 뿌듯하고 좋을 것 같다 😆