JavaScript 기능 구현 - 토글

간단한 JavaScript 기능을 chatGPT를 이용해 추가할 수 있을지 보았다.

간단한 텍스트가 있는 웹사이트고, 왼쪽상단에 토글 버튼이 있다.

토글 버튼을 클릭했을때 왼쪽으로부터 navBar가 등장하거나 사라지는 기능이 있으면 좋을 것 같다.

 

그리고 새로고침 등을 했을때에도, toggle의 on/off 상태가 저장되서 유지되었으면 좋겠다.

 

조금씩 단계별로 진행을 해보려고 자그마한 부분의 코드만 먹여보았다.

쉽게말해 토글버튼과 토글을 할 navBar를 getElementsByClassName로 잡을 경우, 2개 이상이 잡힐 수 있으니 하지 말라는 조언이었다. 수정해주자.

 

const toggleButton = document.querySelector('.toggle');
const navBar = document.querySelector('.active');

toggleButton.addEventListener('click', function () {
  navBar.classList.toggle('active');
});

querySelector를 써도 되고, getElementsByClassNama 후 [0]번째 element를 잡아주면 된다.

smooth transition이 없으니 토글을 해도 이쁘지 않다. 

 

to be continued.