Javascript 30 Challenge

누른 키의 audio와 key element 찾기 >HTML을 먼저 살펴보자. HTML data-key속성으로 숫자가 쓰여있는 것을 볼 수 있다. 이 숫자의 의미는 무엇일까? keyCode keyCode

transform-origin: x-axis y-axis;rotate으로 회전을 시키면 가운데 축으로 돌아가게 된다. transform-origin: 100%;을 주면 아래와 같이 지정한 축을 중심으로 돌아가게 된다.setInterval로 1초마다 getSec

HTMLElement: input event 각 input 태그의 값들이 변경될 때마다 이벤트를 호출하기 위해서는 이벤트 조건을 input으로 지정하면 된다. blur Reference https://developer.mozilla.org/ko/docs/Web/AP

프랑스 파리의 도로명 처럼 '~의 도로' Boulevards de ~ 를 만들어주면 된다고 생각했다. 사실은 urlhttps://en.wikipedia.org/wiki/Category:Boulevards_in_Paris에 나와있는 도로들 중 de가 들어있는

flex를 이용한 간단한 프로젝트이다. 다른 부분들은 굳이 포스팅할 만큼 중요한 부분이 아니기도 하고 너무 간단해서, 주요 부분만 정리해야겠다. #1 💨 css에서 panel active class에 다음과 같은 속성을 주고, css 클릭한 패널에 해당 클래스

여기서 \[prototype]을 펼쳐 살펴보자.받아온 response에 사용할 수 있는 메소드들이 나열되어 있다.여기서 json을 사용해 json형태로 로우 데이터를 변환하자.이렇게 데이터를 받아오자마자 모두

is at least one person 19 or older?is everyone 19 or older?Find is like filter, but instead returns just the one you are looking for...find the commen

첫 번째 줄의 스크립트는 document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색한다. 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있다.모양 주위의 획(윤곽선)에

Interpolated Styled Warning Error Info ![](https://images.velog.io/images/gygy/post/c5a721ba-a023-42d3-b414-

KeyboardEvent.ShiftKey Shiftkey를 눌렀는지 안 눌렀는지 여부를 판별하기 위해 사용할 수 있는 메소드이다. 하... 나는 생각도 못하고 click이벤트와 shift keydown이벤트 두 개를 만들고 있었는데! 중첩해야 하는 부분이 있어 고민했었

구현한 기능이지만 눈여겨 볼 부분이 있거나, 놓친 부분에 대해서만 간략히 정리했다.내가 구현했던 것과 비슷하지만, 여기서는 메소드 자체를 삼항연산자로 변수지정을 한뒤 videomethod로 실행시켰다.현재 재생시간전체 미디어의 길이재생시간이 업데이트 될 때마다 이벤트가

처음에 대체 뭘???하라는 건지 감이 안왔는데..아주 간단하지만 꽤 재미있는 프로젝트였다. 키를 많이 누를 수록 배열의 길이가 길어지기 때문에 원하는 secretCode 길이만큼만 남기고 그 안에서 검사한다. cornify_add()이 함수를 호출할 때마다 화면에 무

const slideInAt = (window.scrollY + window.innerHeight) - slideImage.height / 2;얼마나 수직으로 스크롤했는지를 픽셀로 나타내는데, 더 정확히 말하면 scrollY는 현재 뷰포트 위쪽 모서리의 Y좌표를 반환한

const age2 = age와 같은 형태로 배열과 객체를 얕은 복사하면,age2를 수정해도 원본배열인 age가 수정된다.이에 대해서는 지난 포스팅 Premitive & Reference를 살펴보자얕은 복사란 객체를 복사할 때 원래값과 같은 참조를 가리키는 것을 말한다

boolean값으로, required 속성이 있는 경우 양식을 제출하기 전에 사용자가 입력 값을 지정해야 한다.HTML 요소는 사용자 인터페이스 항목의 설명을 나타낸다. label을 input요소와 연결해 사용했을 때 장점screenreader는 form input

내가 했던 방법은 이것이다.기존의 밴드리스트에서 a,the, an을 제외한 밴드 이름으로 새로운 리스트를 만들어 정렬했다.그 다음 그 리스트를 화면에 표시했다.아래와 같이 만들었을 때,이렇게 화면에서는 ,가 찍혀서 화면에 표시되는 것을 볼 수 있다.$bandList.i

처음에는 이렇게 만들었는데,이렇게 배열을 따로 만들고 일일히 푸시할 필요는 없었다.DOM요소를 가져왔으므로 $timeList는 유사배열객체인 노드리스트이다.여기서 Array.from으로 배열로 만들어준다음, map을 사용해 data-time 값만 가져온다. "6:30"

MediaDevices 인터페이스의 getUserMEdia()메서드 :사용자에게 미디어 입력 장치 사용 권한 요청사용자가 수락시 요청한 미디어 종류의 트랙을 포함한 MediaStream 객체로 이행하는 Promise 반환스트림은 카메라,비디오 녹화장치, 스크린 공유장치

Web Speech API로, 음성인식interim results는 최종이 아닌 중간 결과를 말하는 것으로, boolean 값을 반환한다.이 값을 설정해주어야 음성인식이 끝나지 않아도 말하는 도중에 계속해서 스크립트가 작성된다.speech recognition serv

xCode가 깔아지지를 않아서...일단 해결한 뒤에 해야겠다.

하얀색 하이라이터로 쓸 도형을 만들어준다.a 태그를 모두 가져와 mouse가 위로 올라가면 발생하는 이벤트를 등록한다.마우스가 올라간 a태그의 크기를 받아와 하이라이터의 크기를 똑같이 지정한다.스크롤한 만큼 하이라이터를 내리고 왼쪽으로 옮겨주어야 한다.

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterancehttps://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis

처음에는 이렇게 접근했다.css 'nav-sticky'는 position: fixed;를 가지고 있다.이 클래스를 추가해줌으로써 nav의 position을 relative에서 fixed로 바꾸어주어 스크롤할 때 함께 따라올 수 있도록 했다(아래 gif참고)한 가지 간과

상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다.capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,t

각 버튼에 마우스를 올릴 때마다 드롭다운 메뉴가 보여야 한다.CSS 스타일 선언 객체의 속성에 대한 새 값을 설정한다.style.setProperty(propertyName, value, priority);DOMString수정할 CSS 속성 이름(하이픈 대소문자)DOM

사실 여기에서 $items.offsetLeft는 0으로 나오고, 이게 0이어도 기능 구현에는 아무런 문제가 없는데 왜 이걸 넣었는지??? 모르겠다. 다른 비슷한 기능을 구현하면서 알아봐야겠다. 더 공부해야하는 부분이다.드래그해 움직인 커서의 pageX좌표 - 처음 클릭

이전 프로젝트 \[JS30] - 11) Custom Video Player 에서 한번 비디오에 대해 다룬적이 있었던데다 간단한 프로젝트여서 어렵지는 않았다.다만 offsetY의 높이를 원하는 재생속도로 어떻게 변환할지가 고민이 되어 해당 부분은 강의를 참고했다.0.4x

시간 계산하기 > 어떤 다른 방법으로 일정한 타이머를 구현할 수 있을까?

hole을 모두 선택해온 다음, 랜덤으로 하나의 hole을 선택한다.사실상 변경할 일이 없어 그냥 1로 해주어도 상관없었지만... 왜 1이 들어갔는지, 혹은 랜덤값을 조정할 일이 있을 때를 고려해 상수값을 지정해주었다. 누군가와 협업한다는 가정하에, 가독성 좋고 확장성