로그인 화면 만들기

<form class="hidden" id="loginForm">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>

input이 가지고 있는 속성을 이용해 입력값의 길이를 제한하거나 필수로 입력값을 받아오도록 설정할 수 있다

해당 속성들을 이용하기위해선 form으로 input을 감싸고 있어야 함

 

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

const HIDDEN_CLASSNAME = "hidden"
const USERNAME = "username"

function onLoginsubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME, username);
    paintGreetings(username);
}

function paintGreetings(username) {
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username}`;
}

const savedUsername = localStorage.getItem(USERNAME);

if (savedUsername === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginsubmit);
} else {
    paintGreetings(savedUsername);
}

JavaScript에서 document를 이용해 HTML 문서를 객체로 불러올 수 있음

classList를 이용해 원하는 class를 빼거나 추가할 수 있다 add / remove

addEventListener를 이용해 event들을 읽어올 수 있고, 해당 event가 발생할 때 function을 작동하도록 설정할 수 있다

 

반복되는 작업들은 function으로, 문자는 (대문자)변수로 만들어 사용하는 것이 오류를 줄이는 좋은 방법이다