TIL: 2022-09-14

⚙️ 오늘 학습한 주제

DOM 유효성 검사 실습, 이벤트 객체

 

🐹 오늘의 기분

어제에 이어서 유효성 검사 실습을 이어서 했다. 필드 입력에 따라 회원가입 버튼을 활성화하는걸 구현해보고 싶어서 학습 끝내고 계속 붙잡고 있었다. 어찌저찌 완성은 해서 뿌듯하긴 한데 이렇게 하는게 맞는지 아리까리하다. 항상 내가 한 게 작동이 잘 되면 뭔가 의심스러움. 

내일부터는 솔로 프로젝트가 시작된다. 처음 들어왔을 때 선배들이 만든 거 보고 저거 내가 할 수 있을까 했는데 벌써 눈 앞에 와버렸다. 할 수 있는 만큼 해보자! 

 

🗣 오늘 구현해본 내용

기본 제공 CSS에 기능만 구현한 것

CSS 변경 후

CSS는 크게 변경하지 않았다. 하나 특별한 걸 꼽자면 하트 채우기 정도..? 이것도 야매로 구현한거라 보완할 점이 아직 많다 ㅜㅎ 

버튼 활성화

• CSS pseudo selector :disabled를 이용해서 비활성화 상태의 디자인을 적용
• validate 함수를 만들어 이벤트 핸들러로 각 필드에 함수 적용

/* CSS */

button:disabled {
  cursor: default;
  background-color: rgb(161, 161, 161);
}

let elSignUpButton = document.querySelector("button");

// 비활성화 상태를 디폴트로 적용
elSignUpButton.disabled = true;

// 아이디와 비밀번호가 모두 조건을 만족하면 회원가입 버튼 활성화
function validateBtn() {
  // 모든 폼이 비어있지 않고
  // 아이디가 4글자 이상이며, 비밀번호 입력값이 같을 때
  if (
    elInputUsername.value &&
    elInputPassword.value &&
    elCheckPassword.value &&
    isMoreThan4Length(elInputUsername.value) &&
    isMatch(elInputPassword.value, elCheckPassword.value)
  ) {
    // 버튼 활성화
    elSignUpButton.disabled = false;
  } else {
    // 버튼 비활성화
    elSignUpButton.disabled = true;
  }
}

// addEventListener를 이용하여 각 필드에 함수 적용
// 각 필드에 텍스트를 입력할 떄마다 함수를 실행하여 버튼을 활성화할지 결정함
elInputUsername.addEventListener("keyup", validateBtn);
elInputPassword.addEventListener("keyup", validateBtn);
elCheckPassword.addEventListener("keyup", validateBtn);

뜻대로 구현되지 않아서 이것저것 찾아보다 보게 된 링크도 남겨둔다. 

기본 로직은 이 블로그를 참고했다.

(조건문이 이렇게 길어지는 게 맞나...? 싶긴 하다.)

id, pw 입력 시 로그인 버튼 활성화 기능

 

아이디 입력 폼에서 벗어났을 때 메시지가 사라지도록 하기

비밀번호를 입력하는 중에도 아이디 입력 폼의 메시지가 계속 떠있어서 거슬렸다.

아이디 입력 폼에서 벗어났을 떄에는 메시지를 다시 숨기고 싶어 구글링하다 onblur 속성을 알게 되어 이를 이용해봤다. 

// 아이디 입력창에서 포커스를 해제하면 성공 메시지가 사라지도록
elInputUsername.onblur = function () {
  elSuccessMessage.classList.add("hide");
};

 

하트 채우기

로고를 넣고 싶었는데 마땅히 떠오르지가 않아서 그냥 font-awesome에서 하트 아이콘을 불러왔다.

빈 하트와 채운 하트는 클래스명이 딱 하나만 다르길래 조건에 따라 이것만 바꿔주면 채우기 기능을 구현할 수 있을 것 같았다.

<!-- 빈 하트 -->
<i class="fa-regular fa-heart"></i>

<!-- 꽉 찬 하트 -->
<i class="fa-solid fa-heart"></i>

구글링해보니 클래스명을 바꾸는 메소드로 element.classList.replace('기존 클래스명', '바꿀 클래스명')이 있길래 이걸 써먹었다.

// 빈 하트에서 꽉 찬 하트로 변경
elStatusId.classList.replace("fa-regular", "fa-solid");

 

❓ 막히는 or 막혔던 부분

이벤트 객체 실습(아메리카노, 카페라떼)에서 어떤 걸 불러와야할지 몰라 한참 고민했었다. console.log로 이것저것 출력해보며 설마 이건가? 했던 게 정답이었다. 

포커스했을 때 테두리 색을 변경하고 싶었는데 fieldset과 input 중 어느걸 손대야 할 지 몰라 그대로 뒀다. 뭘 손대야 하는거지..

하트가 채워질 때 세로로 채워지는 애니메이션을 구현해보고 싶다.

 

🔍 공부가 더 필요한 부분

정규표현식

onclick과 addEventListener의 차이