목표 : 2020이 지나기 전에 챌린지 완주🔥
https://github.com/Jo-Myounghee/JavaScript30/tree/master/1.JavaScript%20Drum%20Kit
- 버튼 누르면 소리나는 건줄 알았는데 키보드 이벤트만 들어있어서 버튼을 click한 경우에도 해당 소리가 나게끔 추가
https://github.com/Jo-Myounghee/JavaScript30/tree/master/2.JS%20and%20CSS%20Clock
-
시침, 분침, 초침의 크기를 각각 다르게 제작
-
z-index를 사용해 시침>분침>초침 순으로 정렬
-
transform-origin 사용을 통해 시침, 분침, 초침을 움직임
https://github.com/Jo-Myounghee/JavaScript30/tree/master/03%20-%20CSS%20Variables
- 전역 CSS 변수 선언 및 변수 사용하는 방법
- 태그에
data-{이름}
속성을dataset.이름
으로 불러와서 사용할 수 있음
- javascript 내장 메서드
- map
- reduce
https://github.com/Jo-Myounghee/JavaScript30/tree/master/05%20-%20Flex%20Panel%20Gallery
- flex
- flex-grow
- flex-shrink
- flex-basis
https://github.com/Jo-Myounghee/JavaScript30/tree/master/06%20-%20Type%20Ahead
- fetch
https://github.com/Jo-Myounghee/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202
- 전개 구문 (
...
)
https://github.com/Jo-Myounghee/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas
- canvas
https://github.com/Jo-Myounghee/JavaScript30/tree/master/09%20-%20Dev%20Tools%20Domination
- dev tools (console.dir)
- axios VS fetch
this
https://github.com/Jo-Myounghee/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player
- 영상 재생 관련 기능
- duration
- currentTime
https://github.com/Jo-Myounghee/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection
- 코나미코드같은 이스터에그 만들기
https://github.com/Jo-Myounghee/JavaScript30/tree/master/13%20-%20Slide%20in%20on%20Scroll
- scroll 위치에 따라 img 활성화/비활성화
- 숫자, 문자, 배열, 객체의 참조와 copy하는 방법
https://github.com/Jo-Myounghee/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow
- preventDefault()
https://github.com/Jo-Myounghee/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow
- 변수 여러개 한 번에 할당하는 방법
- CSS 대문자 속성
https://github.com/Jo-Myounghee/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles
- 정규표현식
parseFloat()
: 문자열 -> 실수로 변환Math.floor()
: 내림
https://github.com/Jo-Myounghee/JavaScript30/tree/master/19%20-%20Webcam%20Fun
- webcam 연결 및 사진 촬영
https://github.com/Jo-Myounghee/JavaScript30/tree/master/20%20-%20Speech%20Detection
- 음성 인식
https://github.com/Jo-Myounghee/JavaScript30/tree/master/21%20-%20Geolocation
- 나침판기능 (맥에서만 가능)
- 단어 효과
https://github.com/Jo-Myounghee/JavaScript30/tree/master/23%20-%20Speech%20Synthesis
- 음성으로 읽어주는 기능
https://github.com/Jo-Myounghee/JavaScript30/tree/master/24%20-%20Sticky%20Nav
- Nav bar 상단 고정 기능
- Event Bubbling
- Event Capture
event.stopPropagation()
- Event Delegation
- once
https://github.com/Jo-Myounghee/JavaScript30/tree/master/26%20-%20Stripe%20Follow%20Along%20Nav
- navbar item에 마우스를 호버링 했을 때 dropdown 메뉴가 보여지는 기능
https://github.com/Jo-Myounghee/JavaScript30/tree/master/27%20-%20Click%20and%20Drag
-
scrollLeft
-
e.pageX
https://github.com/Jo-Myounghee/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller
- video.playbackRate
- e.pageY
- element.offsetTop
https://github.com/Jo-Myounghee/JavaScript30/tree/master/29%20-%20Countdown%20Timer
- Date.now()
- setInterval
- clearInterval
- 0:00이 되면 timeover 글자 나오게 추가
https://github.com/Jo-Myounghee/JavaScript30/tree/master/30%20-%20Whack%20A%20Mole
- 두더지잡을 때 1~9 키패드를 사용해서도 잡을 수 있게 keydown 이벤트 추가