📝 오늘 한 것

1. 모멘텀 클론코딩 시작

2. event.preventDefault()

📖 학습 자료

1. 노마드 코더 '바닐라 JS로 크롬 앱 만들기'

📚 배운 것

1. Log In

1) form 유효성 검사

JavaScript if 구문 대신 HTML 수정

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

function onLoginBtnClick() {
  const username = loginInput.value;
  if (username === '') { // form ⊃ input(required 속성 추가)
    alert('Please write your name.');
  } else if (username.length > 15) { // maxlength="15"
    alert('Your name is too long.');
  }
  console.log(username);
  loginInput.value = '';
}

loginButton.addEventListener('click', onLoginBtnClick);

<form id="login-form">
  <input required maxlength="15" type="text" placeholder="what is your name?">
  <button>Log In</button>
</form>

2) submit 이벤트

form 태그 안에서 submit 이벤트가 발생할 때마다 페이지가 새로고침됨

해결 방법
event.preventDefault() : 해당 이벤트가 발생 시 브라우저의 기본 동작을 취소해줌

function onLoginSubmit(event) {
  event.preventDefault();
}

loginForm.addEventListener('submit', onLoginSubmit);

3) form 태그 숨김, h1 태그 보임

HTML

<h1 id="greeting" class="hidden"></h1> <!-- h1은 기본적으로 안 보임 -->
<form id="login-form">
  <input required maxlength="15" type="text" placeholder="what is your name?">
  <button>Log In</button>
</form>

CSS

.hidden {
  display: none;
}

JavaScript

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

const HIDDEN_CLASSNAME = 'hidden';
// string을 저장하는 변수는 관습적으로 대문자로 표기한다

function onLoginSubmit(event) {
  loginForm.classList.add(HIDDEN_CLASSNAME); // form 태그 숨김
  const username = loginInput.value;
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME); // h1 태그 보임
}

loginForm.addEventListener('submit', onLoginSubmit);

✨ 내일 할 것

1. 클론코딩 계속