html element를 안보이게 하기

이는 앞서 text color 바꾸기와 비슷하게 돌아간다.

CSS에 class hidden을 추가한다.

.hidden{
    display: none;
}

그리고 해당 이벤트리스너 함수에 classList.add("hidden");을 해주면 된다.

function onLoginSubmit(event) {
  event.preventDefault();
  const userName = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello, ${userName}!`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
  console.log(userName);
}
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);

제거는 .remove겠지?

 

그리고 역시나 string이 반복되고 있으므로, hidden은 변수 HIDDEN_CLASSNAME 으로 지정해줬다. 이런 string의 저장은 대문자와 _ 로 표기하는게 암묵적 규칙.