.hidden {
  display:none;
}

const loginForm = document.querySelector("#loginForm");
const loginInput = document.querySelector("#loginForm input");
const greeting = document.querySelector("#greeting");

//관습적으로 string만 포함된 변수는 대문자로 표기함
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

//브라우저 이벤트 막기, event라고 적는 것이 관행
function onLoginSubmit(event) {
  //form을 submit하는 경우 페이지 새로고침 방지
  event.preventDefault();
  
  //input을 통해 받은 value값 변수에 담기
  const username = loginInput.value;
  
  //로컬스토리지에 저장하기
  localStorage.setItem(USERNAME_KEY, username);
  
  //클래스명 추가하여 css로 form 숨기기
  loginForm.classList.add(HIDDEN_CLASSNAME);
  paintGreetiong();
}

function paintGreetiong() {
  
  const username = localStorage.getItem(USERNAME_KEY);
  
  //h1에 텍스트 + 변수 조합하여 텍스트로 넣기
  greeting.innerText = `반가워요 ${username}님 :)`;
  
  //h1 나타나기
  greeting.classList.remove(HIDDEN_CLASSNAME); 
}

//로컬스토리에 담긴 유저정보 변수에 담기, 없을 경우 null
const sadveUsername = localStorage.getItem(USERNAME_KEY);

//유저정보가 로컬스토리지에 없는 경우
if(sadveUsername === null) {
  
  //form 나타나기
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  
  //submit 감지하여 이벤트 실행(Enter or Click)
  loginForm.addEventListener("submit", onLoginSubmit);
  
//유저정보가 로컬스토리지에 있는 경우
} else {
  paintGreetiong();
}