Westagram 코딩을 진행하면서 필요한 함수들을 구현해보았다!
어떻게 구현했냐면?
<button class="login_button_button" disabled onclick="login()">로그인</button>
//일단 버튼에 disbled 속성을 줘서 눌리지 않게 했습니다.
그리고 이 버튼을 클릭했을 때 ->onclick
login()이라는 함수가 호출되도록 했습니다.//
const button = document.querySelector('.login_button_button');
const inputId = document.querySelector('.account_id');
const inputPw = document.querySelector('.account_pw');
//버튼, 인풋창들을 호출하기 위한 변수 설정
function login() {
location.href ="/main.html";
}
// 눌렀을 때 /main.html에 가게하기 위한 경로설정
//함수 작동원리
1.inputId,inputPw value의 길이가 1이상일 때 버튼의 스타일을 바꿔주고 button의 disabled를 false로 바꿔준다 (disabled = true 일 때 , 버튼 클릭이 안됌)
2.else -> 앞 조건이 충족하지 않을 경우 버튼컬러를 원래색으로 바꾸고,
disabled를 true로 바꾼다!
function accountCheck(){
if(inputId.value.length >= 1 && inputPw.value.length >=1){
button.style.backgroundColor = "blue";
button.disabled = false;
}else{
button.style.backgroundColor = "#C4E1FB";
button.disabled = true;
}
}
//그리고 Id,Pw Input에 모두 이벤트리스너를 사용해서
keyup -> 키 입력후 발생될 수 있도록 설정하였습니다!
inputId.addEventListener('keyup', accountCheck);
inputPw.addEventListener('keyup', accountCheck);
"이것은 댓글입니다"를 입력해보았습니다.
어떻게 구현했냐면?
const input = document.querySelector('.comment_input');
const form = document.querySelector('#comment_form');
const commentUl = document.querySelector(".comments");
//댓글의 input,form,comments 클래스를 가지고있는 ul을 불러오기위한 변수 설정
function addInput(inputValue){
// ul,안에 넣을 li, span을 위한 변수를 설정
//왜 span을 썼냐면 inline요소이고 댓글이 세로로 달렸으면 해서
const li = document.createElement("li");
const span = document.createElement("span");
//li요소안에 span을 넣는다!
li.appendChild(span);
//span
span.innerText = inputValue;
commentUl.appendChild(li);
}
//prevent.Default()->요소의 기본 동작을 막는 메소드입니다.
form의 submit했을 때 새로고침되는 동작을 막기위해서 사용했습니다.
function addComment(event){
event.preventDefault();
const inputValue = input.value;
//input.value에 공백을 준 이유는 이벤트는 submit 동작이 실행될 때마다 발생하는데
input칸을 비워주지 않으면 전에 입력했던 내용이 그대로 남아있습니다.
input.value="";
addInput(inputValue);
}
form.addEventListener('submit',addComment);
사실 함수 구현도 함수 구현이지만.. CSS가 너무 복잡했다. 제대로 못만든 부분도있고, 앞으로 나갈 진도 때문에 못하고... 리팩토링도 해야하고 다음주부터 해야할 react도 해야한다...
리팩토링 관련한 것은 따로 블로그를 쓸 예정이지만 효율적이고 가독성 좋은 코드를 만드는 것은 참 어렵다.. 이제 시작했으니 긍정적인 생각만 하자!