바닐라 자바스크립트 연습하는 중 간단한 UI부터 만들어 보는 것을 추천받음.
그래서 토글버튼을 만들어봄.
<div class="wrap">
<button class="toggleBtn">토글</button>
<p class="toggleTarget">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, placeat. Reiciendis quia amet, quam nemo quos quod distinctio explicabo saepe cupiditate, quasi perspiciatis magnam.
</p>
</div>
HTML은 위와 같다.
.toggleBtn{
display: block;
width: 80px;
height: 50px;
margin: 50px auto 0;
}
.toggleTarget{
width: 800px;
margin: 20px auto 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: none;
}
.toggleTarget.on{
display: block;
}
CSS는 위와 같다.
// 토글버튼 만들기
const _toggleBtn = _get('.toggleBtn')
const _toggleTarget = _get('.toggleTarget')
const toggleEvent = () => {
if(_toggleTarget.className == 'toggleTarget'){
_toggleTarget.className = 'toggleTarget on'
} else {
_toggleTarget.className = 'toggleTarget'
}
}
_toggleBtn.addEventListener('click', toggleEvent)
JS는 위와 같다.
입문자는 잘 활용하면 좋겠다.
나도 초보지만 입문자일 때 이런 코드 직접 짜보려니 어려웠다.