심심해서 만들어 본 Toggle Switch📍

시작한 계기

머리를 식힐 겸(?) 원티드에서 채용 공고를 보다가, 2기 때 수료 했던 원티드 프리온 보딩 공고가 떠 있어 들어가 봤다.이번에는 어떤 선별 과제가 있는지 확인하다가 첫 번째 구현 문제가 눈에 띄었다.

 

해당 문제는 Toggle Switch 를 구현하는 것인데, 이전의 Toggle Switch와는 다르게 Slider 영역에 두 개의 글자가 각 사이드에 위치하였고 Toggle이 해당 글자 부분으로 이동하게 되면 동적으로 스타일링이 변하는 흥미로운 문제였다.

 

한산한 밤, 오랜만에 바닐라 JS 🍌 를 사용하고 싶어 해당 문제를 다음과 같이 간단히 코딩해보았다.

 

Code

See the Pen Untitled by 최병현 (@leulsiqf) on CodePen.