Javascript-01에 이어서 사용자의 인풋을 화면에 출력하는 방법이다.
사용자가 이름을 넣고 제출 버튼을 누르면,
제출 버튼 양식이 없어지고
h1으로 환영 메시지가 나타나게 해본다.
그러려면 h1 태그를 html의 form태그 아래에 추가한다. 기본적으로는 h1이 숨겨져 있고, 사용자가 이름을 제출해야만 h1이 표시되도록 한다. 그러기 위해서 class를 hidden으로 하고,
hidden일 때 숨겨지도록 하기 위해 style.css에 display를 none으로 설정한다.
style.css가 추가되었으므로 당연히 index.html에 style.css를 연결해준다.
제출 버튼을 눌렀을때 form 태그부분이 사라져야 하므로
loginForm.classList.add("hidden")을 추가한다.
입력받은 사용자 이름으로 환영인사를 하기 위해 html에 greeting 태그를 추가한다.
다시 app.js에서 우선 greeting 을 선택해주고,
greeting의 innerText를 변경해준다음,
hidden을 제거해준다.
hello world explorer