[JavaScript] Getting Username

1. form 없애기

1. 첫 번째 방법
   HTML 요소 자체를 없애야 한다.

2. 두 번째 방법
   css를 이용해서 숨긴다.

.hidden {
	display:none;
}

어떤 요소에게든 hidden이라는 classname을 주면 그 요소를 숨기게 해준다. 물론, 유저가 이름을 submit 한 뒤에만.

유저가 이름을 form을 통해 submit 했을 때, 기본 동작은 막아주고 값이 저장되게 해본다.

const loginFrom = document.querySelector("#login-from");
const loginInput = document.querySelectior("#login-form input");

function onLoginSubmit(event) {
	event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");   <----classList 추가하기
}

loginForm.addEventListener("submit", onLoginSubmit);

HTML에 비어 있는 <h1 class="hidden"></h1> 요소를 추가해준다.
그럼 h1은 hidden으로 인해 숨겨져 있을 것이다.
이제 할 일은 form은 숨기고 h1은 표시되도록 하는 것이다. 하지만 h1에 표시할 텍스트가 있을 때만 표시되도록 할 것이다.

2. Hidden

기본 동작은 실행되지 않도록 막아주고, hidden이라는 classname을 더해줘서 form을 숨기고 유저의 이름을 변수로 저장해주고, 그 이름은 h1 안에 넣을 것이다.

먼저 <h1 id="greeting" class="hidden"></h1>
greetingd이라는 id를 추가해준다.

const loginFrom = document.querySelector("#login-from");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";   <----- hiddden이 두 번 쓰여져 헷갈릴 수도 있으니 사용

function onLoginSubmit(event) {
	event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);  <----- classList의 hidden을 제거
}

loginForm.addEventListener("submit", onLoginSubmit);

위 코드의 HTML을 잘 살펴보면 단순히 classname을 추가해주고 삭제할 뿐이다.
물론 h1 안에 텍스트를 추가하기 전에는 hidden class를 삭제할 수 없다.

3. string 합치기

위 코드에서 구현했던 string "Hello " + username을 다른 방법으로 합칠 수 있다.

`Hello ${username}`

이 방법은 string과 변수를 합쳐주는 코드이다. 중요한 것은 무조건 백틱기호를 사용해야 한다는 것이다.

``