JS에서 반응형 아이콘 버튼 만들기

나는 최근에 내 첫 번째 JS 웹 애플리케이션의 초기 반복을 마무리했습니다. 내 백엔드 데이터베이스와 프런트엔드 디스플레이 간의 크로스오버가 강력하고 흥미로웠다는 것을 알았지만 정말 흥분한 것은 애플리케이션의 스타일과 상호 작용이었습니다. 나는 모든 것이 매끄럽고 단순하며 반응이 좋기를 원했습니다. 그러한 예 중 하나는 응용 프로그램의 헤더에 포함된 버튼에서 찾을 수 있습니다. 여기서 왼쪽 상단과 오른쪽 상단에 표시됩니다.



나뭇잎 버튼과 문 버튼을 클릭하면 각각 새 식물 또는 새 방을 만들기 위한 양식을 렌더링합니다. 내 목표는 다음과 같이 마우스가 아이콘 위에 있을 때와 해당 양식이 열릴 때 아이콘이 초기 녹색에서 대비되는 주황색으로 변경되도록 하는 것입니다.



이를 달성하는 것은 실제로 매우 간단합니다. 일치하는 형식을 렌더링하는 기능 버튼이 이미 있으므로 특정 DOM 이벤트, 특히 마우스 클릭 및 마우스 호버 시 표시되는 이미지를 변경하는 방법을 찾기만 하면 되었습니다.

첫 번째 단계는 내 버튼 아이콘의 녹색 및 주황색 버전을 애플리케이션의 로컬 파일 구조에 추가하는 것이었습니다. 외부 소스도 이를 위해 작동할 수 있습니다.

내 .html 파일에서 잎의 <div> 태그에 클래스green-leaf가 있는 <button>를 추가하고 문<div> 태그에 클래스green-door가 있는 <button>를 추가했습니다.

<button id="leaf-button"><div class="green-leaf"></div></button>

green- 클래스는 버튼 내의 div에 대한 일종의 기본 상태 역할을 합니다.

내 .css 파일에 다음 줄을 추가합니다.

.green-leaf {
  content: url("../images/green-leaf.png");
}

.orange-leaf {
  content: url("../images/orange-leaf.png");
}

.green-leaf:hover {
  content: url("../images/orange-leaf.png");
}

.green-door {
  content: url("../images/green-door.png");
}

.orange-door {
  content: url("../images/orange-door.png");
}

.green-door:hover {
  content: url("../images/orange-door.png");
}

이제 요소에 green-leaf 클래스가 있는 경우 콘텐츠는 녹색 잎의 로컬 이미지 파일로 연결되는 해당 URL에서 제공됩니다. 클래스가 orange-leaf 로 변경되면 내용이 오렌지 잎의 로컬 이미지 파일로 향하는 URL로 변경됩니다. 이 콘텐츠 변경은 미열린 양식의 버튼(녹색 아이콘으로 표시됨)을 마우스로 가리킬 때도 발생합니다.

이제 남은 것은 해당 요소에 JS 이벤트 리스너를 추가하는 것입니다. 이것은 또한 매우 간단합니다. 매우 기본적인 예는 다음과 같습니다.

//grab the div containing the image

let leaf = document.querySelector("#leaf-button div")


//add an event listener to the leaf with an anonymous function

leaf.addEventListener("click", function(){
  leaf.classList.toggle("green-leaf")
  leaf.classList.toggle("orange-leaf")
}

이제 버튼을 클릭할 때마다 green-leaf 또는 orange-leaf 클래스를 번갈아 가며 프로세스에서 다른 CSS 규칙을 적용합니다.