Wanna be Brilliant Full-Stack Developer

목표 이제 우리가 하고싶은건, 유저가 이름을 제출하면 이 form 자체를 없애고싶다. CSS를 통해 숨길수도있다는데 한번 살펴보자! .hidden { display: none; } CSS에 이렇게 작성하면 classname이 하는 일은 display: none 이라는것이다. 어떤 요소에게든 이 classname을 주면 그 요소를 숨기게 될것이다! 우리가 이름을 제출했을때는 기본동작은 막아주고 form 은 사라지게 만들기위해 const loginInput = document.querySelector("#login-form input"); const loginForm = document.querySelector("#login-form"); const loginButton = document.querySele..

목표 우리는 submit이라는 event가 발생하는걸 아예 막거나 중간에 개입해서 submit event가 발생했다는걸 파악하고 싶다! 우리가 기억해야될점은 submit은 엔터를 누르거나 버튼을 클릭할때발생한다는 사실을 기억해야한다 const loginInput = document.querySelector("#login-form input"); const loginForm = document.querySelector("#login-form"); const loginButton = document.querySelector("#login-form button"); function onLoginSubmit() { const username = loginInput.value; console.log(usernam..

목표 Log In div 안에 input 태그와 버튼 태그를 넣었기때문에 JS에서 div의 login-form id를 통해서 input과 button element를 찾아낼수있다. Js에서 찾을때는 queryselector 와 getElementbyid를 쓸수 있는데 queryselector()을 사용할때는 대상이 id인지 명확히 해줘야한다! 왜냐하면 querySelector로는 classname, tagname 모두 검색이 가능하기 때문이다. getElementbyid는 그럴필요가 없다 왜냐하면 자바스크립트는 아이디로 찾는것을 알기떄문에! const loginForm = document.getElementById("login-form"); const loginInput = loginForm.queryS..

목표 class name을 바꾸는 다른방법과 그 방법은 classList를 사용하는인데 한번 익숙해보져봅시다! const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { const clickedClass = "clicked" if(h1.className ==="clickedClass") { h1.className = ""; }else { h1.className = "clickedClass"; } } h1.addEventListener("click", handleTitleClick); classList는 말 그대로 , 우리가 class들의 목록을 작업할 수 있게끔 허용해준다! element의 clas..