4 - 최종본

/**첫번째 로그인 div */

const loginForm = document.querySelector("#login-form");

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

const greetingH1 = document.querySelector("#greet");

// const loginButton = loginForm.querySelector("button")

/**이러면 더 정밀하게 해당 태그를 지칭할 수 있음

* 아니면 document.querySelector("#login-form input") 이런식으로도 가능

*/

const HIDDEN_MAKECLASS = "hidden";

const USERNAME_KEY = "username" /**hidden 반복되니까 변수지정 */

/**click event로 input에 쓴 내용을 저장하고 싶을때 */

// function btnClick() {console.log(loginInput.value);

// console.dir(loginInput)}/**이걸 찍어보면 object에 value값이 내가 폼에 입력한 값이 들어있음 */

function btnSubmit(event) {

event.preventDefault(); /**기본동작(submit) 막아주기 */

loginForm.classList.add(HIDDEN_MAKECLASS);

const username = loginInput.value;

localStorage.setItem(USERNAME_KEY,username);

showGreetings(username); /**input에서 넣은 username */

 

}/**유효성 검사(공백,길이)를 js에서 해도 되지만 html input 내장기능에도 있음 ex)required maxlength='15' */

function showGreetings(user) {

greetingH1.classList.remove(HIDDEN_MAKECLASS);

greetingH1.innerText = `안녕하세요 ${user}님`;

 

}

 

loginForm.addEventListener("submit",btnSubmit);

/**브라우저는 버튼을 누르거나 엔터를 누르면 새로고침하게 기본 설정되어있음 */

/**addEvent가 발생하면 브라우저는 함수를 ()로 실행하는게 아니라 여기에 첫번째 arg로써 추가적인 정보를 가진 채로 호출하게 됨

* ()로 호출하지 않음 - 필요로 할만한 정보를 추가함

* 정보는 방금 실행된 event에 대한 정보

* preventDefault()는 브라우저가 기본적으로 하는 행동을 막음(새로고침 같은거)

*/

/**첫번째로 하는 일 - local storage에서 save된게 있는지 확인 */

const savedUsername = localStorage.getItem(USERNAME_KEY);

//만약에 null이면 hidden을 지우고(입력폼을 보여주고) submit event가 발생하면 btnSubmit 실행

if(savedUsername === null){

loginForm.classList.remove(HIDDEN_MAKECLASS);

loginForm.addEventListener("submit",btnSubmit);

//show the form

} else {

showGreetings(savedUsername)//localstorage에서 온 username;

}

 

// const resetBtn = d ocument.querySelector(".clear");

 

// function resetLocalStorage() {

// localStorage.clear();

// greetingH1.innerText = "닉네임이 초기화되었습니다. 새로고침 해주세요";

// }

 

// resetBtn.addEventListener("click",resetLocalStorage);