instagram clone coding
로그인 페이지
HTML
<body>
<div class="container">
<header>
<h1 class="titlelogo">Westagram</h1>
</header>
<main>
<input type="text" id="id" placeholder="전화번호, 사용자 이름 또는 이메일" class="loginput">
<input type="password" id="password" placeholder="비밀번호" class="loginput">
<button disabled type="button" class="loginbtn" onclick="location.href = '../main/main.html'">로그인</button>
</main>
<footer>
<a href="#" class="forgotpw">비밀번호를 잊으셨나요?</a>
</footer>
</div>
</body>코(드)풀이
-
input창을<main>태그 안에 묶는다 (시멘틱 태그를 사용하면 가독성이 높아지고 SEO로 이득!) -
첫 번째
input창은id를 작성하니type을text로
-
두 번째
input창은password를 작성하니type을password로 -
placeholder기능으로input창에 사용자에게 힌트로 뭘 작성할지 알려주기 -
button으로 로그인 버튼 구현하기onclick = "location.href = '이동할 경로'"버튼을 클릭하면 이동할 [메인 페이지] 링크 걸기- 초기에는
button이 비활성화 되어 있어야 하니깐disabled속성부여
-
a태그로 비밀번호를 잊었을 때 이동하는 페이지 작성하기(지금은 빈 데이터 부여)
구현해야 할 기능 2가지
1. id와 password 입력창에 한 글자 이상 작성되면 로그인 버튼 색상 변경하기
const login = document.querySelector('#id');
const password = document.querySelector('#password');
const loginbtn = document.querySelector('.loginbtn');
function activate(){
if(login.value && password.value){
loginbtn.style.backgroundColor="#0195f7"
}else {
loginbtn.style.backgroundColor="#c4e1fb"
}
}
login.addEventListener('keyup', activate);
password.addEventListener('keyup', activate);코(드)풀이
-
DOM으로 id를 입력하는
input창 login,
password를 입력하는input창 password,
로그인button을 가져온 loginbtn -
value는input창에 작성되는 값! -
하단에 있는
addEventListener함수를 사용하여'keyup'이라는 이벤트가 일어나면'keyup'은 키보드의 아무 키를 눌렀다가 떼었을 때 키보드의 키가 올라오는 순간- 조건에 따라서
login input창과password input창 모두addEventListener를 적용해야 한다.
-
이벤트 핸들러인
activate를 실행하라.
activate( )
if(login.value && password.value) //위의 조건은 truth한 값을 가지고 있다. //""이 false이니깐 input 창의 value는 한 글자 이상 들어가게 되니 ""이 아닌 truthy
- 위의 조건이 truthy니깐 true를 반환하여 다음 명령문을 실행한다.
- 다음 명령문
loginbtn.style.backgroundColor = "활성화 버튼 색상" else{loginbtn.style.backgroundColor = "비활성화 버튼 색상" //위의 조건이 true라면 활성화 버튼 색상으로 loginbtn을 지정하라 //위의 조건이 false라면 비활성화 버튼 색상으로 loginbtn을 지정하라
2. id에는 '@' 문자가 포함되어야 하며, password에는 5글자 이상 작성되면 로그인 버튼 활성화 시키기
function activate(){
if(login.value && password.value && login.value.includes('@') && password.value.length >= 5){
loginbtn.disabled = false;
loginbtn.style.backgroundColor="#0195f7"
}else {
loginbtn.disabled = true;
loginbtn.style.backgroundColor="#c4e1fb"
}
}코(드)풀이
- if 조건문에 두 번째 조건을 추가하자
if(login.value && password.value && login.value.includes('@') && password.value.length >= 5)
//includes 메서드로 @ 문자가 있는지 확인하기
//value의 길이를 확인하기 위해 length 속성 사용하기-
모든 조건을 && 연산자로 묶어 모든 조건이 true 일 때만 다음 명령문을 실행하자
-
다음 명령문
{
loginbtn.disabled = false;
loginbtn.style.backgroundColor="#0195f7"
}else {
loginbtn.disabled = true;
loginbtn.style.backgroundColor="#c4e1fb"
}
}
//위의 조건이 true라면 disabled 버튼에 false값을 지정하여 '활성화'
//위의 조건이 false라면 disabled에 true 값을 지정하여 '비활성화'새롭게 알게 된 부분 정리
- input창에 작성되는 데이터를 자바스크립트에서 value를 사용하여 얻어올 수 있다.
- truthy는 이럴 때 사용하는 구나..(만약 truthy를 몰랐다면 조건문이 엄청 길어졌을 것)
- disabled 기능이 유용하구나
- css에는 input:disabled로 사용할 수 있다.
Front-end Developer