처음 HTML 파일을 작성할때, display : flex; 를 쓰지 않았다.
결과는 원하는대로 나왔지만 나의 첫 코드는 쓸데없이 수많은 <div>와 <p>태그로 범벅이 됐다.
HTML 초기버전
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<divclass="wrapLoginBox"><divclass="loginBox"><pid="title">justgram</p><divclass="inputBox"><p><inputid="userInput"type="text"placeholder="전화번호, 사용자 이름 또는 이메일"/></p><p><inputid="pwInput"type="password"placeholder="비밀번호"/></p><p><buttonclass="loginBtn"disabled>로그인</button></p></div><divclass="foot"><ahref="https://www.instagram.com/accounts/password/reset/">비밀번호를 잊으셨나요?</a></div></div></div>
위 코드가 처음 아무 생각없이 짠 HTML이다.
같은 팀원의 다른 코드를 우연히 봤는데 굉장히 정갈하고 깔끔했다.
깊게 반성하고 다시 HTML을 만졌다.
HTML 수정버전
1
2
3
4
5
6
7
8
9
<divclass="wrapLoginBox"><h1id="mainTitle">justgram</h1><inputid="userInput"type="text"placeholder="전화번호, 사용자 이름 또는 이메일"/><inputid="pwInput"type="password"placeholder="비밀번호"/><buttonid="loginBtn"disabled>로그인</button><divclass="foot"><ahref="https://www.instagram.com/accounts/password/reset/">비밀번호를 잊으셨나요?</a></div></div>
이것이 다시 짠 HTML
Mission 2 - ID, PW 입력 시 로그인 버튼 활성화 기능
조건
Input 요소(Element)에 이벤트를 등록하여 글자 변화를 감지하게 만들어주세요!!
요소에 addEventListener로 이벤트 등록
ID 입력칸과(AND) PW 입력칸에 글자가 하나라도 들어가면 로그인 버튼 활성화
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
constidInput=document.getElementById("userInput");constpwInput=document.getElementById("pwInput");constbtn=document.getElementById("loginBtn");// 1차 버전
functionclickEnable(){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창이 다시 공란이 됐을때 완벽하게 원상태로 복귀하는 조건문)
constidInput=document.getElementById("userInput");constpwInput=document.getElementById("pwInput");constbtn=document.getElementById("loginBtn");functionclickEnable(){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으로 변경
// 클릭 가능 & 불가능 복귀되는지 확인용 함수
functionbtnCheck(){alert("클릭 가능");}btn.addEventListener("click",btnCheck);
inchan included in Front-End