<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="Momentum.css">
</head>
<body>
<form id="login-form">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="Momentum.js"></script>
</body>
</html>CSS
.hidden{
display: none;
}JS
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden"; // 관습 비교적 중요하지 않은 단순 문자열 같은경우 대문자를 사용하고 스네이크 방식으로 작성
function onLoginSubmit(e) {
// console.dir(loginInput);
// console.log("click!!!!!");
e.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
console.log(username);
greeting.innerText = `Hello ${username}`;
// greeting.innerText = "Hello " + username; 과 동일하다
// 템플릿 리터럴을 사용해 변수를 문자열처럼 사용가능
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
- 함수가 실행되면 기본동작을 막는다. (e.preventDefault)
- username은 loginInput에 사용자가 입력한 value를 담는다.
- loginForm의 class를 추가한다 (HIDDEN_CLASSNAME)
- greeting은 h1 태그를 가리킨다.
- greeting의 텍스트 안에 Hello와 username에 담긴 value로 값을 바꾼다.
- 이때 템플릿 리터럴을 사용한다. (예시 코드의 주석 확인)
- greeting에 hidden으로 적용되어있던 class를 제거한다.
Template Literal 규칙
- ``(백틱)을 사용한다.(따옴표 대신)
- 변수를 사용할땐 ${변수명} 형식으로 사용한다.
프론트엔드 개발자 지망생