Jo-Myounghee / JavaScript30

30 Day Vanilla JS Challenge

JavaScript30

목표 : 2020이 지나기 전에 챌린지 완주🔥

https://JavaScript30.com

1. JavaScript Drum Kit (12/02)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/1.JavaScript%20Drum%20Kit

1) 추가한 점

• 버튼 누르면 소리나는 건줄 알았는데 키보드 이벤트만 들어있어서 버튼을 click한 경우에도 해당 소리가 나게끔 추가

2. Analog Clock (12/03)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/2.JS%20and%20CSS%20Clock

1) 추가한 점

• 시침, 분침, 초침의 크기를 각각 다르게 제작

• z-index를 사용해 시침>분침>초침 순으로 정렬

• transform-origin 사용을 통해 시침, 분침, 초침을 움직임

3. CSS Variables (12/04)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/03%20-%20CSS%20Variables

1) 배운 점

• 전역 CSS 변수 선언 및 변수 사용하는 방법
• 태그에 data-{이름} 속성을 dataset.이름으로 불러와서 사용할 수 있음

4. Array Cardio Day 1 (12/05)

https://github.com/Jo-Myounghee/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/index-START.html

1) 배운 점

• javascript 내장 메서드
  • map
  • reduce

5. Flex Panel Gallery (12/06)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/05%20-%20Flex%20Panel%20Gallery

1) 배운 점

• flex
  • flex-grow
  • flex-shrink
  • flex-basis

6. Type Ahead (12/08)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/06%20-%20Type%20Ahead

1) 배운 점

• fetch

7. Array Cardio Day 2 (12/10)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202

1) 배운 점

• 전개 구문 (...)

8. Fun with HTML5 Canvas (12/11)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas

1) 배운 점

• canvas

9. Dev Tools Domination (12/12)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/09%20-%20Dev%20Tools%20Domination

1) 배운 점

• dev tools (console.dir)
• axios VS fetch

10. Hold Shift and Check Checkboxes (12/12)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes

1) 배운 점

• this

11. Custom Video Player (12/12)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player

1) 배운 점

• 영상 재생 관련 기능
  • duration
  • currentTime

12. Key Sequence Detection (12/13)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection

• 코나미코드같은 이스터에그 만들기

13. Slide in on Scroll (12/14)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/13%20-%20Slide%20in%20on%20Scroll

• scroll 위치에 따라 img 활성화/비활성화

14. JavaScript Reference VS Copying (12/15)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying

1) 배운 점

• 숫자, 문자, 배열, 객체의 참조와 copy하는 방법

15. LocalStorage (12/15)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow

1) 배운 점

• preventDefault()

16. Mouse Move Shadow (12/16)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow

1) 배운 점

• 변수 여러개 한 번에 할당하는 방법
• CSS 대문자 속성

17. Sort Without Articles (12/17)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles

1) 배운 점

• 정규표현식

18. Adding Up Times with Reduce (12/18)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/18%20-%20Adding%20Up%20Times%20with%20Reduce

1) 배운 점

• parseFloat() : 문자열 -> 실수로 변환
• Math.floor() : 내림

19. Webcam Fun (12/19)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/19%20-%20Webcam%20Fun

1) 배운 점

• webcam 연결 및 사진 촬영

20. Speech Detection (12/20)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/20%20-%20Speech%20Detection

1) 배운 점

• 음성 인식

21. Geolocation (12/21)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/21%20-%20Geolocation

1) 배운 점

• 나침판기능 (맥에서만 가능)

22. Follow Along Link Highlighter (12/22)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter

1) 배운 점

• 단어 효과

23. Speech Synthesis (12/23)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/23%20-%20Speech%20Synthesis

1) 배운 점

• 음성으로 읽어주는 기능

24. Sticky Nav (12/24)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/24%20-%20Sticky%20Nav

1) 배운 점

• Nav bar 상단 고정 기능

25. Event Capture, Propagation, Bubbling and Once (12/25)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/25%20-%20Event%20Capture%2C%20Propagation%2C%20Bubbling%20and%20Once

1) 배운 점

• Event Bubbling
• Event Capture
• event.stopPropagation()
• Event Delegation
• once

26. Strip Follow Along Nav (12/26)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/26%20-%20Stripe%20Follow%20Along%20Nav

1) 배운 점

• navbar item에 마우스를 호버링 했을 때 dropdown 메뉴가 보여지는 기능

27. Click and Drag (12/27)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/27%20-%20Click%20and%20Drag

1) 배운 점

• scrollLeft

• e.pageX

28. Video Speed Controller (12/28)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller

1) 배운 점

• video.playbackRate
• e.pageY
• element.offsetTop

29. Countdown Timer (12/29)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/29%20-%20Countdown%20Timer

1) 배운 점

• Date.now()
• setInterval
• clearInterval

2) 추가하고 싶은 점

• 0:00이 되면 timeover 글자 나오게 추가

30. Whack A Mole (12/30)

https://github.com/Jo-Myounghee/JavaScript30/tree/master/30%20-%20Whack%20A%20Mole

1) 추가하고 싶은 점

• 두더지잡을 때 1~9 키패드를 사용해서도 잡을 수 있게 keydown 이벤트 추가