📚 WesBos Vanilla JS 30 Challenge
웹 개발자 WesBos가 주관하는 Vanilla JS 챌린지
시리즈 목차
[wesbos30] 01. Drum kit
키보드로 오디오를 재생하는 드럼 키트를 만들어보자!
[wesbos30] 02. Clock
CSS와 JavaScript를 활용하여 간단한 아날로그 시계를 만들어보자!
[wesbos30] 03. CSS Variables 조절하기
페이지 내의 여러 타입의 <input>들을 조정하면 그 값들이 실시간으로 이미지에 반영되도록 해보자!
[wesbos30] 04. Array 메서드 활용 1
Array 메서드를 배워보자 1탄
[wesbos30] 05. Flex Panel
flex를 사용하여 사이즈가 유연하게 바뀌는 panel을 만들어보자!
[wesbos30] 06. 검색 자동완성 기능 구현
javascript를 활용하여 실시간으로 검색정보를 받아오자!
[wesbos30] 07. Array 메서드 활용 2
Array 메서드를 배워보자 2탄
[wesbos30] 09. 개발자 도구 활용
크롬 개발자 도구의 기능 중에서 개발자에게 유용한 여러 console 메서드에 대해 알아보자!
[wesbos30] 10. Hold Shift to check the box
SHIFT 키와 같이 클릭하여 한번에 여러 개의 체크박스를 모두 체크하는 기능을 구현해보자!
[wesbos30] 11. Custom Video Player
💡 비디오 플레이어의 여러 기능들을 직접 구현해보자!
[wesbos30] 12. Key Sequence Detection
💡 특정 키들을 순서대로 입력하면 발생하는 이스터에그를 구현해보자!
[wesbos30] 13. 스크롤 시 이미지 슬라이드
💡 화면을 스크롤하면 이미지가 슬라이드 인하며 나타나는 기능을 구현해보자!
[wesbos30] 14. 배열&객체의 복사와 참조
💡 참조(reference)와 복사(copy)의 차이점에 대해 알아보자!
[wesbos30] 17. Sort Without Articles
💡 주어진 배열을 관사(A, An, The)를 제외한 알파벳 순으로 정렬해보자!
[wesbos30] 22. Following Highlight
Following Highlight
[wesbos30] 24. Sticky Nav
스크롤을 내려도 페이지 밖으로 사라지지않고 상단에 고정되어 있는 네비게이션 바를 구현해보자!
[wesbos30] 25. 이벤트 캡쳐와 버블링
💡 어떤 요소에서 이벤트가 발생했을 때 이벤트 전파 방향에 따라 구분되는 버블링과 캡쳐링에 대해 알아보자
[wesbos30] 26. 동적인 드롭다운 Nav
💡 챕터22 Following Highlight에서 배운 내용을 활용하여 메뉴에 마우스를 올리면 흰 배경의 드롭다운 메뉴가 나오는 기능을 구현해보자!
[wesbos30] 27. Click And Drag
💡 마우스를 클릭 후 드래그하면 이미지가 좌우로 부드럽게 슬라이드하는 기능을 구현해보자!
[wesbos30] 29. CountDown Timer
💡 시간을 정해주면 카운트 다운을 해주는 타이머를 만들어보자!
[wesbos30] 30. 두더지 뚝배기
💡 랜덤으로 튀어나오는 두더지를 클릭해서 점수를 올리는 간단한 두더지 잡기 게임이다.