함수 구현을 해보자!

김인태·2022년 6월 2일
0

Westagram 코딩을 진행하면서 필요한 함수들을 구현해보았다!

🙉필요한기능

  • Id, Pw가 1글자 이상일 때 로그인 버튼이 활성화
  • 댓글 input 창에 엔터, "게시" 누르면 댓글 추가되도록 createElement로 요소 생성해서, input에 입력한 값이 추가되도록!

코드 구현!

💥결과

이런화면이었다가 이메일과 비밀번호를 입력하면?!

짜잔!

어떻게 구현했냐면?

<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도 해야한다...
리팩토링 관련한 것은 따로 블로그를 쓸 예정이지만 효율적이고 가독성 좋은 코드를 만드는 것은 참 어렵다.. 이제 시작했으니 긍정적인 생각만 하자!

profile
새로운 걸 배우는 것을 좋아하는 프론트엔드 개발자입니다!

0개의 댓글