[TIP] Javascript - Input Group

🥅 완성 모습 

See the Pen Untitled by 민수 (@applan_siepe) on CodePen.

👨‍💻 계기

회사에서 동적으로 InputGroup을 생성, 삭제, 저장 관련된 로직이 필요한 경우가 생겼다. 

이전 회사에서도 개발해보고 다양한 회사에서 경험해봤는데 할때마다 잊는 것 같아서 이후 사용하기 위해 

새롭게 JS ES6 문법을 참고하여 개발해보려고한다. 

🤔 요구사항

• 추가 구현
  • Input Box 는 Text 타입으로 2개 생성 ( Key / Value ) 
  • 1번째 Group 버튼은 `+` 버튼 
  • 2번째 Group 이후 버튼은 `-` 버튼 
• 삭제 구현 
  • `-` 버튼 클릭 시 클릭한 InputGroup 삭제 
• 최대 갯수 제한 
  • 최대 갯수 변수를 이용해 InputGroup 생성 
  • alert 메시지 = CURRENT COUNT(${currentLength}) THIS NOT OVER MAX COUNT(${maxLength})
• 유효성 체크
  • 두개 중 한개라도 입력 시 메시지 표출 ( 모두 입력 || 모두 입력 X )

🧗‍♀️ 과정

2023.01.10 : 최초 생성, 함수 생성[추가, 삭제]
2023.01.10 : submit, clear 버튼 생성 ( inputGroup, btnBroup 영역 생성 )

Fn 함수 정리 

생성
addInputGroup()

// 인풋 추가
const addInputGroup = () => {
  // 최대 InputGroup 갯수
  let maxLength = 10;
  // 현재 InputGroup 갯수
  let currentLength = document.getElementsByClassName('input-group').length;
  let inputGroup = "";
  if(maxLength > currentLength) {
      inputGroup += `<div class="input-group">`;
      inputGroup += `<label>K/V </label>`;
      inputGroup += `<input class="key" type="text" name="form"> `;
      inputGroup += `<input class="value" type="text" name="value"> `;
      inputGroup += `<button type="button" class="plus" onclick="removeInputGroup(this)">-</button>`;
      inputGroup += `</div>`;
  }else{
    alert(`CURRENT COUNT(${currentLength}) THIS NOT OVER MAX COUNT(${maxLength})`);
  }
  // 기존에 있는 #form에 새로운 InputGroup 추가
  document.getElementById('form').insertAdjacentHTML('beforeend', inputGroup);
}

삭제
removeInputGroup()

// 인풋 삭제
const removeInputGroup = (ts) => {
  // 클릭된 버튼 > 부모 InputGroup을 삭제
  ts.parentNode.remove();
}

 

📚 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript