I'm gonna be the BEST.

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.7 Super Recap) 그동안 작성했던 코드들을 좀 더 고쳐보도록 하자. function paintGreetings(username) { greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); } 생각해보면 paintGreetings 함수는 따로 인자를 받을 필요가 없다. if (savedUsername === null) { // show the form loginForm.classList.remove(HIDDEN_CLASSNAME); loginForm.addEventListener("submit", onLoginSubmit); } else..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.6 Loading Username) 이번 시간에는 form을 보여주기 전에, addEventListener를 하기 전에 local storage가 비어있으면 form부터 보여주면서 지금까지 해왔던 대로 프로그램이 진행되고(이전 포스팅 참고) local storage에 유저 정보가 있으면 form을 보여주지 않고 h1을 보여주는 프로그램을 만들어보도록 하자! 그럼 먼저 local storage에 유저 정보가 있는지 없는지 확인해야 할 것이다. const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form inp..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.4 Getting Username) 이번에는 User가 이름을 제출하면 form을 없애보자. 이걸 구현하기 위한 방법들이 있다. 1. HTML 요소 자체를 없애기 2. CSS를 이용하여 숨기기 2번 방법을 이용해서 없애보자. .hidden { display: none; } CSS파일에 hidden이라는 classname을 만들어준다. display: none을 준다. 이게 끝. 이제 어떤 요소에게 이 clssnames을 주면 그 요소는 숨겨진다. Log In html의 form에 class="hidden"을 추가했더니 요소들이 사라져 흰 화면만 표시되는 것을 볼 수 있다. 하지만 우리는 User가 이름을 제출한 뒤 사라지는 것을 원하기 때문에..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.3 Events part Two) 브라우저에서 링크(href)의 기본 동작을 JS로 제어해보자 먼저 HTML 파일에 링크를 생성하는 코드를 추가한다. Go to courses 이 상태로 코드를 실행하면 Go to courses 라는 링크를 누르자마자 페이지를 이동하게 된다. 이 기본 동작을 JS를 통해 제어해보도록 하자. const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); const link = document.querySelector("a"); function onLoginSunm..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.2 Events) 지난 강의를 통해 form을 배웠고 그로인해 이제 button이 필요하지 않다는 것을 알았다. form의 submit에 대해 알아보도록 하자. 먼저 submint이라는 event가 발생하는 걸 아에 막거나 중간에 개입해서 submit event가 발생했다는 걸 파악하고 싶다. const loginForm = document.querySelector("#login-form") const loginInput = document.querySelector("#login-form input"); function onLoginSunmit() { const username = loginInput.value; console.log(user..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.1 Form Submission) 이번엔 username에 대한 유효성 검사를 할 것이다. username은 공백일 수 없고 너무 긴 이름이어도 안된다고 정하자. 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.le..

[ 노마드코더 학습 기록 ] 바닐라 JS로 크롬 앱 만들기(4.0 Input Values) Log In 먼저 HTML을 작성한다. div id를 지정해주고 (class도 상관없음) input과 button을 만들어준다. const loginForm = document.getElementById("login-form"); // or querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); 이제 JS.app으로 넘어가 input과 button을 찾아보자! ducument 메서드를 통해 HTML에 접근하고 getElemen..