노마드코더의 클론 코딩 중, moment라는 크롬 앱을 따라 만들어 보려고 한다.
로그인과 'Hello (사용자이름)' 문구 띄우기.
HTML
자바스크립트 if문으로 입력창이 비어있거나, 글자 수가 초과됐을 때 경고창을 띄울 수 있지만,
코드가 많아지고, html이 제공하는 기본 기능을 사용하는 게 더 심플하기 때문에 html에 required, maxlength 등을 사용했다.
form의 전체와, 그 안의 input 태그를 변수에 담기 위해 id 값을 줬고,
사용자 이름을 입력하면 입력창이 사라지고 환영한다는 문구를 띄우는 작업을 하기 위해 h1태그에도 id 값을 줬다.
CSS
사용자가 이름을 입력하면 입력창을 가려줄 css다.
h1태그의 기본값이다.
웹 페이지
JS
웹 페이지의 Login 버튼을 누르면 페이지가 새로고침 된다. 이건 브라우저의 기본 기능이다.
새로고침을 원하지 않기 때문에 기본 기능이 일어나지 않기 위해 preventDefalut()를 사용했다.
preventDefalut는 단어 그대로 기본(Defalut)을 방지(prevent)하는데,
함수의 파라미터 값으로 event를 받고 그 event를 preventDefalut 한 것이다.
Login을 누르면 새로고침은 일어나지 않고, loginForm의 클래스 리스트(classList)에 HIDDEN(hidden)을 넣는다.
그렇게 되면 입력창은 사라진다.
loginInput의 value를 username이란 변수에 담고, h1태그(id = "greeting")에 Hello ${username}이란 텍스트를 넣은 후,
greeting에 기본으로 달려있던 hidden이란 클래스를 삭제시킨다. (greeting은 html h1태그의 id값이다.)
이름을 입력하고 로그인을 누르면
입력창은 사라지고 Hello와 이름의 문구가 생긴다.
