#4.6~5.0

Loading Username

(username) 이 인자로 오는 이유는, 위의 onLoginSubmit의 username을 h1의 내용에 넣어야 하기 때문에 데이터를 username으로 받기 때문이다.

같은 로직으로 하단의 if문에서는 username을 savedUsername라는 변수로 받기 때문에 괄호안에 savedUsername가 들어가는 것이고, paintGreetings인자로 savedUsername가 들어가도 데이터를 받을 수 있다.

Super Recap

const loginInput = document.querySelector("#login-form input")
const loginForm = document.querySelector("#login-form")
const greeting = document.querySelector("#greeting")
const HIDDEN_CLASSNAME ="hidden";
const USERNAME_KEY = "usename";
const savedUsername = localStorage.getItem(USERNAME_KEY);

function paintgreeting(username){
greeting.innerText = `good job ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);// = h1 보이기
}

function loginSubmit(event){
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME); //h1만 나타내기 위해서 loginForm의 class에 다시 hidden을 추가.
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintgreeting(username); //h1을 숨긴 hidden을 제거함으로 h1만 나타나게됨
}

if(localStorage.getItem(USERNAME_KEY) === null )
{loginForm.classList.remove(HIDDEN_CLASSNAME) // localstorage에 정보가 없는 경우 loginForm을 출력하여 사용자로 하여금 값을 작성하게 하여 저장한다.
loginForm.addEventListener("submit", loginSubmit)
}
else {paintgreeting(savedUsername);} // 이미 localstorage에 정보가 담긴 경우 h1만 출력되게 하면 됨

Intervals

const clock = document.querySelector("h2#clock");
const clock = document.querySelector("#clock");
const clock = document.getElementById("clock");

(모두 같음) 

interval = 매번 일어나야 하는 무언가.
setInterval(실행하고자 하는 function, 호출되는 function 간격을 몇 ms로 할지)
5000ms = 5초