30 Day Vanilla JS Coding Challenge Study - 6주차
- LocalStorage and Event Delegation
- CSS Text Shadow Mouse Move Effect
- Sorting Band Names without articles
15. LocalStorage and Event Delegation
영상: https://youtu.be/YL1F4dCUlLc
로컬 스토리지와 이벤트 위임
리스트의 <ul>
태그에 이벤트를 등록하여 자식요소인 다수의 <li>
태그에 이벤트를 한번에 등록한다.
이외에 특별한 부분은 존재하지 않았으며
<form>
태그에 당연히 e.preventDefault()
를 사용한 점과reset()
을 활용한 부분을 다시 한번 상기시킬 수 있었다.
16. CSS Text Shadow Mouse Move Effect
영상: https://youtu.be/zaz9gLI-Xac
Text Shadow 효과 활용하기
1 | const { offsetWidth: width, offsetHeight: height } = hero; |
mousemove
이벤트 타입을 사용하여 텍스트의 `textShadow 스타일링을 수정한다.
17. Sorting Band Names without articles
영상: https://youtu.be/PEEo-2mRQ7A
1 | const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog']; |
sort()
메서드를 활용한 정렬과 정규표현식 활용 방법으로 딱히 특별한 내용은 없었다.