인스타그램 로그인 화면 구성
Contents
justgram - UI 만들기
Mission 1 - 로그인 페이지 레이아웃
처음 HTML 파일을 작성할때, display : flex; 를 쓰지 않았다.
결과는 원하는대로 나왔지만 나의 첫 코드는 쓸데없이 수많은 <div>와 <p>태그로 범벅이 됐다.
HTML 초기버전
<div class="wrapLoginBox">
<div class="loginBox">
<p id="title">justgram</p>
<div class="inputBox">
<p>
<input id="userInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일"/>
</p>
<p>
<input id="pwInput" type="password" placeholder="비밀번호" />
</p>
<p><button class="loginBtn" disabled>로그인</button></p>
</div>
<div class="foot">
<a href="https://www.instagram.com/accounts/password/reset/">비밀번호를 잊으셨나요?</a>
</div>
</div>
</div>
위 코드가 처음 아무 생각없이 짠 HTML이다.
같은 팀원의 다른 코드를 우연히 봤는데 굉장히 정갈하고 깔끔했다.
깊게 반성하고 다시 HTML을 만졌다.
HTML 수정버전
<div class="wrapLoginBox">
<h1 id="mainTitle">justgram</h1>
<input id="userInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
<input id="pwInput" type="password" placeholder="비밀번호" />
<button id="loginBtn" disabled>로그인</button>
<div class="foot">
<a href="https://www.instagram.com/accounts/password/reset/">비밀번호를 잊으셨나요?</a>
</div>
</div>
이것이 다시 짠 HTML
Mission 2 - ID, PW 입력 시 로그인 버튼 활성화 기능
조건
Input 요소(Element)에 이벤트를 등록하여 글자 변화를 감지하게 만들어주세요!!
- 요소에 addEventListener로 이벤트 등록
- ID 입력칸과(AND) PW 입력칸에 글자가 하나라도 들어가면 로그인 버튼 활성화
const idInput = document.getElementById("userInput");
const pwInput = document.getElementById("pwInput");
const btn = document.getElementById("loginBtn");
// 1차 버전
function clickEnable() {
if (!(idInput.value && pwInput.value)) {
btn.disabled = true;
} else {
btn.disabled = false;
btn.style.cursor = "pointer";
}
}
idInput.addEventListener("keyup", clickEnable);
pwInput.addEventListener("keyup", clickEnable);
// // 2차 버전 (input창이 다시 공란이 됐을때 완벽하게 원상태로 복귀하는 조건문)
const idInput = document.getElementById("userInput");
const pwInput = document.getElementById("pwInput");
const btn = document.getElementById("loginBtn");
function clickEnable() {
if ((idInput.value.length && pwInput.value.length) !== 0) {
console.log("disabled.false");
btn.disabled = false;
btn.style.cursor = "pointer";
btn.style.backgroundColor = "rgba(65,147,239)";
} else {
btn.disabled = true;
btn.style.removeProperty("cursor");
btn.style.backgroundColor = "rgba(198, 222, 250, 1)";
}
}
idInput.addEventListener("input", clickEnable); // 이벤트를 keyup에서 input으로 변경
pwInput.addEventListener("input", clickEnable); // 이벤트를 keyup에서 input으로 변경
// 클릭 가능 & 불가능 복귀되는지 확인용 함수
function btnCheck() {
alert("클릭 가능");
}
btn.addEventListener("click", btnCheck);
2차버전에서의 차이점1
idInput.value.length,pwInput.value.length의 변수 추가 (특정 문자열 수에 대한 활성화조건 변경시 바로 쓸 수 있음)- 버튼이 활성화되고 난 후, 다시 비활성화될때 완벽한 조건으로의 복귀 및 CSS 속성 연결 추가
object.addEventListener의 이벤트 조건으로keyup에서input으로 변경 (키보드 컨디션 불량시에 대한 오류 방지 및 특정키에 대한 모든 오류 차단)2