# javascript30
11. Custom Video Player
<video>를 커스텀해보자원래 <video controls> 와 같이controls attribute를 주면 위와 같이 브라우저 기본 비디오 UI를 제공해준다.이 UI를 입맛대로 커스텀하려면, 하나부터 열까지 다 뜯어고쳐야한다.progress bar를 클릭
10. Hold Shift and Check Checkboxes
Shift키를 누르고 체크를 하면,두 체크박스 사이가 전부 눌려지는 계획표 만들기input\[type='checkbox']
9. Fun with HTML5 Canvas
웹 개발 디버깅을 할때 브라우저의 개발자도구에서 console.log를 찍곤한다console 출력의 여러가지 방법 알아보자
3. CSS Variables
Spacing, Blur, Base Color 각 label이 변화할 때, 사진이 그 알맞게 변화해야 한다.Spacing: 그림의 padding값Blur: 그림이 흐린정도 (filter: blur(3px))Base Color: 그림의 background-color:ro
2. JS and CSS Clock
new Date()현재 시간을 가져온다.new Date().getSecond() 로 현재 초를 가져온다이외에 시,분,요일,년도 등 가져올 수 있다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/
Custom Video Player
1. Custom Video Player 동영상의 재생, 볼륨컨트롤, 빨리감기 등의 기능을 수행할 수 있도록 이벤트를 만들어 보자. 2. 전체 코드 index.html script.js 3. 동작 순서 > 비디오 컨트롤과 관련된 동작을 addEventListner로 감지 후, 해당하는 event 함수를 호출한다. video 감지 이벤트 -- c...
Hold Shift to Check Multiple Checkboxes
1. Hold Shift to Check Multiple Checkboxes 첫번째 체크박스를 클릭한다. SHIFT 키 누른 후 두 번째 체크박스 클릭 시, 중간에 포함 된 모든 체크박스들이 체크 된다. 2. 전체 코드 3. 동작 순서 > [1] 처음 클릭 시 checkbox의 addEventListenr를 통해 click 동작 감지 , handl...
[javascript30] 14 Must Know Dev Tools Tricks
1. 14 Must Know Dev Tools Tricks google 개발자 도구에서 사용할 수 있는 여러 유용한 도구 정리 2. 전체 코드 3. 동작 순서 4. HTML, CSS 5. JAVASCRIPT
[javascript30] Fun with HTML5 Canvas
1. Fun with HTML5 Canvas 브라우저 상에 마우스를 움직여 그림을 그린다. 색이 계속해서 변경되며, 선의 굵기 또한 지속적으로 증감한다. 2. 전체 코드 3. 동작 순서 > 마우스 좌클릭 시 eventListner를 통해 이벤트 감지 후, fla
[javascript30] Array Cardio Day 2
1. Array Cardio Day 2 JS 배열 관련 메소드 2탄 2. 전체 코드 3. 동작 순서 4. HTML, CSS 5. JAVASCRIPT array.prototype.some() > - 배열 안의 요소 중 단 하나라도 판별함수 통과 시 true를
[javascript30] Type Ahead
1. Type Ahead 입력창에 검색어를 입력 시 검색어에 해당하는 데이터를 아래 목록으로 출력 2. 전체 코드 3. 동작 순서 > fetch() 함수로 cities 배열에endpoint에서 가져온 데이터배열 입력한다. 검색창에 검색어를 입력한다. searchInput의 addEventListener에서 change, keyup 감지 후 displ...
[javascript30] Flex Panel Gallery
1. Flex Panel Gallery css flex 속성을 이용하여 요소 배치 및 동작 화면 클릭 시 해당 구역이 커지거나 작아지는 애니메이션 동작 처리 2. 전체 코드 3. 동작 순서 > panel 요소에서 addEventListner로 click 감지 및 toggleOpen 함수 호출 toggleOpen 함수에서 해당 panel(this)의 ...
[javascript30] Array Cardio Day 1
1. Array Cardio Day 1 javascript에서 제공하는 배열 관련 기능들을 연습해보자 2. 전체 코드 및 내용 filter > filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 => year가 해당 범위 내에 든 요소들만 반환된다. map > map: 배열 내의 모든 요소 각각에 대하여 주어진 함...
[javascript30] CSS Variables
1. CSS Variables spacing, blur, baseColor 의 값 변경에 따라 아래 화면에 css 변경 반영 2. 전체 코드 index.html 3. 동작 순서 > range bar 변경, 색상 선택을 통해 spacing, blur, color 에 대한 값을 변경한다. input.addEventListener 함수에서 change,...
[javascript30] JS and CSS Clock
1. JS and CSS Clock SetInterval 함수로 초 흐름 표현 초마다 CSS 수정을 통해 시계바늘 조정 구현 2. 전체 코드 index.html 3. 동작 순서 > 현재시각의 초,분,시로 시계바늘 각도 계산 계산한 각도로 바늘별 css 변경하여 움직이는 효과 나타냄 4. HTML, CSS css transform > transfo...
[javascript30] JavaScript Drum kit
1. JavaScript Drum kit 키보드를 클릭하여 A,S,D,F...등을 눌렀을때 이벤트 발생 클릭 시 각 자판에 연동된 음원파일 재생 클릭 시 노랗게 하이라이트 발생 2. 전체 코드 style.css index.html 3. 동작 순서 > A, S, D, F.... 키보드를 누른다 3-1. playSound() 함수에서 입력받은 값을 ...
[JavaScript30] CSS + JS CLOCK
바닐라 자바스크립트를 처음으로 새로 공부하는 의미에서 JavaScript30의 웹 사이트의 기능들을 구현해보기로 했습니다. 가장 먼저 작은 시계 기능을 구현하는 코드를 작성했습니다.구현한 코드는 링크를 통해 확인할 수 있습니다.var: 변수를 선언. 추가로 동시에 값을
[JavaScript30] ⏲ 29. Countdown Timer
버튼을 통해 빠른 시간설정을 할 수 있고, 입력을 통해 입력한 시간 동안 카운트 다운을 하는 타이머
