[miniProjects] 32_Good, Cheap, Fast Checkboxes

32_Good, Cheap, Fast Checkboxes

💻주제 : 체크박스 애니메이션

• 세 개의 체크박스가 동시에 체크될 수는 없음.

✨JS

toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))

function doTheTrick(theClickedOne) {
  if(good.checked && cheap.checked && fast.checked) {
    if(good === theClickedOne) {
      fast.checked =false
    }
    if(cheap === theClickedOne) {
      good.checked =false
    }
    if(fast === theClickedOne) {
      cheap.checked =false
    }
  }
}

• toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))
  toggles 배열에 포함된 각각의 토글 요소에 대해 'change' 이벤트 리스너를 등록한다.
  이벤트가 발생하면 doTheTrick 함수가 호출된다.
  이벤트 리스너의 e.target은 이벤트를 발생시킨 요소 자체를 가리킨다.

• doTheTrick 함수
  theClickedOne 매개변수를 통해 어떤 토글 요소가 클릭되었는지를 확인하고, 이에 따라 다른 토글 요소들을 조작하는 역할을 수행한다.
  good, cheap, fast라는 토글 요소들이 모두 선택되었는지를 확인 후, theClickedOne과 각각의 토글 요소를 비교하여 어떤 토글 요소가 클릭되었는지를 판별한다.

-> good 토글 요소가 클릭되었다면, fast 토글 요소를 선택 해제한다.
-> cheap 토글 요소가 클릭되었다면, good 토글 요소를 선택 해제한다.
-> fast 토글 요소가 클릭되었다면, cheap 토글 요소를 선택 해제한다.

👍🏻사용자가 good, cheap, fast 중에서 세 개를 동시에 선택할 수 없도록 제한하는 기능을 구현하고 있다.

❓❗엥 css

❓visibility

.toggle {
  visibility: hidden;
}

• visibility 속성은 요소의 가시성을 제어하는 데 사용된다.
• 기본값은 visible이며, 요소를 보이게 한다.
• hidden 값을 설정하면 요소는 숨겨진다. 이때, 숨겨진 요소는 레이아웃에서 공간을 차지하지만 보이지 않는다.

❓scale

@keyframes slideOn {
  /* x축 좌표 이동으로 애니메이션 설정 */
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(40px) scale(1);
  }
} 

• scale은 CSS의 변형(transform) 속성 중 하나로, 요소의 크기를 조절하는 데 사용된다.
• scale 함수는 요소의 가로와 세로 크기를 동시에 조절한다.
• 기본값은 scale(1)이며, 요소의 크기를 변경하지 않는다.
• scale 함수의 인수로 주어지는 값은 배율(factor)로, 1보다 큰 값은 요소를 확대하고, 1보다 작은 값은 요소를 축소한다.

👍🏻예를 들어, scale(1.2)는 요소의 가로와 세로 크기를 1.2배로 확대하는 것을 의미한다. 마찬가지로, scale(0.8)은 요소의 가로와 세로 크기를 0.8배로 축소한다.