[JaveScript] Momentum App - 1.Login - Input Value, Form Submission, Events

//recap

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

function onLoginBtnClick() {
    const username = loginInput.value;
    if(username === ""){
        alert("Please write your name.");
    } else if(username.length > 15){
        alert("Your name is too long.");
    }
}    

loginButton.addEventListener("click", onLoginBtnClick);

// preventDefault() 이해

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

const link = document.querySelector("a");

function onLoginSubmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    console.log(event);
}

function handleLinkClick(event){
    event.preventDefault(); // 브라우저 기본 동작 막기
    console.dir(event);
    alert("clicked!");
}

//submit 감지
loginForm.addEventListener("submit", onLoginSubmit);

link.addEventListener("click", handleLinkClick);
/* handleLinkClick(); = 이벤트 리스너 안의 함수는 내가 실행하는 것이 아니라 
브라우저가 해주는것.

JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어줌
이 object에는 방금 일어난 event에 대한 여러 정보가 담겨있다.
이건 JS가 자동으로 해주는 것
handleLinkClick({information about the event that just happened})

이 argument는 handleLinkClick을 위한 EventListener 함수의 첫번째 인자로 주어지게 됨

우리는 그 인자를 받는 공간을 만들어주기만 하면 된다.

*/

// CSS "hidden" className으로 숨기고 나타내기

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    
    console.log(username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username}`; 
    // ``backtick(백틱) 사용해서 String 안에 변수값 넣기
}

//submit 감지
loginForm.addEventListener("submit", onLoginSubmit);

// style.css

.hidden {
    display: none;
}