- 만들고 싶은 기능 : 사용자가 이름을 입력하면, 입력값을 저장한 후, 반기는 멘트를 띄우기
*단, 입력 후에 새로고침해도 반기는 멘트가 유지되어야한다.
1. HTML
<form id="login-form" class="hidden">
<input
required
maxlength="15"
type="text"
placeholder="What is your Name?">
<button>Log in</button>
</form>
<h1 id="greeting" class="hidden"></h1>
입력받는 폼태그와 입력 이후에 띄울 수 있는 greeting h1 태그가 있다.
2. CSS
.hidden{
display: none;
}
3. JavaScript
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector(#greeting);
//////////////////////////////////////////
// 먼저 홈페이지에 방문 시, 사용자에게 이름값을 받는다.
//////////////////////////////////////////
function onLoginSubmit(event){
// 폼이 자동적으로 전송돼서 새로고침 되는 것을 방지
event.preventDefault();
// form이 숨겨지게 만든다.
loginForm.classList.add('hidden');
// 사용자에게 받은 이름을 localStorage에 저장한다.
const username = loginInput.value;
localStorage.setItem('username', username);
// greeting 사인을 보여준다.
paintGreetings(username);
}
/////////////////////////////
// greeting 반기는 함수 (h1태그)
/////////////////////////////
function paintGreeting(username){
// 반기는 문구를 h1태그에 설정한다.
greeting.innerText = `Hello ${username}`;
// greeting 에 hidden 클래스를 없애 띄운다.
greeting.classList.remove('hidden');
}
////////////////////////////
//새로고침시, 이름이 저장되어있다면?
////////////////////////////
// localstorage에 저장 안되어있으면 입력값을 다시 받고, 아니면 greeting 페이지 보여주기.
const saveUsername = localStorage.getItem('username');
if (saveUsername === null){
loginForm.classList.remove('hidden')
} else {
paintGreeting(saveUsername);
}
그다음, hidden과 username이라는 문자열이 반복됨으로 변수로 넣어줘서 표현할 수 있다.
아래는 변수로 넣어 표현하였다.
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector(#greeting);
const USERNAME_KEY = "username";
const HIDDEN_CLASSNAME = "hidden";
//////////////////////////////////////////
// 먼저 홈페이지에 방문 시, 사용자에게 이름값을 받는다.
//////////////////////////////////////////
function onLoginSubmit(event){
// 폼이 자동적으로 전송돼서 새로고침 되는 것을 방지
event.preventDefault();
// form이 숨겨지게 만든다.
loginForm.classList.add(HIDDEN_CLASSNAME);
// 사용자에게 받은 이름을 localStorage에 저장한다.
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
// greeting 사인을 보여준다.
paintGreetings(username);
}
/////////////////////////////
// greeting 반기는 함수 (h1태그)
/////////////////////////////
function paintGreeting(username){
// 반기는 문구를 h1태그에 설정한다.
greeting.innerText = `Hello ${username}`;
// greeting 에 hidden 클래스를 없애 띄운다.
greeting.classList.remove(HIDDEN_CLASSNAME);
}
////////////////////////////
//새로고침시, 이름이 저장되어있다면?
////////////////////////////
// localstorage에 저장 안되어있으면 입력값을 다시 받고, 아니면 greeting 페이지 보여주기.
const saveUsername = localStorage.getItem(USERNAME_KEY);
if (saveUsername === null){
loginForm.classList.remove(HIDDEN_CLASSNAME)
} else {
paintGreeting(saveUsername);
}