반응형 챌린지/JavaScript 30일 챌린지30 [JavaScript 30일 챌린지] : 30일차 두더지 게임을 만드는 미니 프로젝트였다. 2022. 2. 26. [JavaScript 30일 챌린지] : 29일차 let countdown; const timerDisplay = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = document.querySelectorAll('[data-time]'); function timer(seconds) { // clear any existing timers clearInterval(countdown); const now = Date.now(); const then = now + seconds * 1000; displayTimeLeft(seconds); displayEndTime(then); countdo.. 2022. 2. 25. [JavaScript 30일 챌린지] : 28일차 저번에 진행했던 동영상 속도 관련 조절하는 것을 이번에는 수직바에 마우스로 속도를 조절하는 프로젝트를 만들었다. 2022. 2. 24. [JavaScript 30일 챌린지] : 27일차 세로 스크롤이 아닌, 가로 스크롤을 통해 내용을 확인할 수 있는 프로젝트였다. 그냥 스크롤 뿐만 아니라 클릭후 드래그하는 방식으로도 페이지를 이동시킬 수 있었다. 2022. 2. 23. [JavaScript 30일 챌린지] : 26일차 마우스를 올리면 dropdown 방식으로 메뉴가 펼쳐지는 프로젝트이다. 홈페이지를 돌아다니다 보면 많이 보이는 방식인데 메뉴에 따라 크기도 알아서 바뀌는 모습을 볼 수있다. 2022. 2. 22. [JavaScript 30일 챌린지] : 25일차 Event Capture, Propagation, Bubbling and Once에 대한 프로젝트이다. Bubbling은 요소의 이벤트가 시작되면 부모 요소부터 쭉 동작하게 된다. 마치 거품이 물 속에서 위로 올라가는 것과 비슷하다. once:true를 주면서 1회만 실행이 되도록 설정했다. 📝 이 페이지를 참고해서 공부했다. 2022. 2. 21. [JavaScript 30일 챌린지] : 24일차 24일차 html { box-sizing: border-box; background: #eeeeee; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .site-wrap { max-width: 700px; margin: 70px auto; background: white; padding: 40px; text-align: justify; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); transform: scale(0.98); transition: transform 0.5s; } bo.. 2022. 2. 20. [JavaScript 30일 챌린지] : 23일차 텍스트 메시지를 읽어주는 프로젝트를 만들었다. 읽는 속도를 조절할 수 있고 멈추기 기능도 만들어줬다. 2022. 2. 19. [JavaScript 30일 챌린지] : 22일차 이번에는 마우스를 올렸을 때 하이라이트가 적용되도록 코드를 진행했다. 근데 아무 곳에 올리는 것이 아니라 a태그가 있는 곳에 마우스를 올렸을 때 하이라이트가 들어오도록 코딩을 해주었다. 2022. 2. 18. [JavaScript 30일 챌린지] : 21일차 Geolocation API를 사용해 위치 정보를 사용하는 프로젝트인데 컴퓨터로 테스트 하기가 애매해서 테스트는 못 해봤다. 📝 ← 여기서 MDN 공식 문서를 확인하면 좋을 것 같다. 2022. 2. 17. [JavaScript 30일 챌린지] : 20일차 20일차 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition.lang = 'en-US'; let p = document.createElement('p'); const words = document.querySelector('.words'); words.appendChild(p); recognition.addEventListener('result', e => { const transcript = Array.from(e.results) .map.. 2022. 2. 16. [JavaScript 30일 챌린지] : 19일차 function getVideo() { navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(localMediaStream => { console.log(localMediaStream); video.srcObject = localMediaStream; video.play(); }) .catch(err => { console.error(`OH NO!!!`, err); }); } function paintToCanvas() { const width =video.videoWidth; const height =video.videoHeight; canvas.width = width; canvas.height = height; return.. 2022. 2. 15. [JavaScript 30일 챌린지] : 18일차 18일차 reduce와 map을 통해 동영상의 모든 시간을 다 합쳐서 나타내는 코드였다. 2022. 2. 14. [JavaScript 30일 챌린지] : 17일차 17일차 스크립트 부분 코드이다. 이번에는 정렬을 했는데 족므 특이한 정렬이다. sort()를 사용했는데 관사(a, an, the)를 제외하고 정렬했다. replace로 변경될 문자열과 변경할 문자열을 지정해서 a, an, the를 바꿔주었다. 2022. 2. 13. [JavaScript 30일 챌린지] : 16일차 16일차 마우스를 움직여 글자의 그림자를 움직이는 코드를 짰다. 단순하게 글이 있는 것 같지만 마우스를 움직여 보면 글자의 그림자가 분리되어 움직이게 된다. 2022. 2. 12. [JavaScript 30일 챌린지] : 15일차 15일차 최종 코드 체크 박스가 있는 메모를 추가할 수 있는 프로젝트를 만들었다. 새로고침을 해도 초기화 되지 않고 로컬 저장소에 저장이 되게끔 만들었다. localStorage.setItem('items', JSON.stringify(items)); 로컬 저장소에 저장할 때 문자열 JSON 형식으로 저장해야 한다. 2022. 2. 11. [JavaScript 30일 챌린지] : 14일차 배열 복사와 참조에 대해 공부하는 코딩이다. 배열 참조는 복사한 결과물을 업데이트하면 둘 다 같은 배열을 가르키고 있기 때문에 원본도 수정이 된다. 하지만 새 배열을 만들고 이전 배열을 결합하는 형식으로 복사본을 가져가면 복사본을 업데이트 해도 원본은 업데이트가 되지 않는다. 2022. 2. 10. [JavaScript 30일 챌린지] : 13일차 스크롤을 내리거나 올릴 때 이미지가 글 가운데 슬라이드로 껴 들어오는 코드를 작성했다. 이미지 칸이 스크롤을 내리기 전에는 비워져있다. 스크롤을 내리면 이미지가 슬라이드로 채워진다. 다시 스크롤을 올리면 이미지가 사라지게 된다. 2022. 2. 9. [JavaScript 30일 챌린지] : 12일차 이번에는 시크릿 키를 정해두고 해당 키를 눌렀을 때 액션이 일어나도록 하는 JS 코딩이다. console.log(e.key); 를 통해 방향키를 눌렀을 때 로그를 남길 수 있다. 배열에 누적되어 들어간다. 시크릿 키는 wesbos로 정해두었고 콘솔이 아닌 화면에 입력하면 숨겨진 기능이 나오게 된다. 이렇게 다른 문자를 입력하면 나오지 않고 지정해둔 시크릿 키를 입력했을 때 화면에 나오게 된다. 2022. 2. 8. [JavaScript 30일 챌린지] : 11일차 const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player.querySelectorAll('[data-skip]'); const ranges = player.querySelectorAll('.player__slider'); function togglePlay(.. 2022. 2. 7. [JavaScript 30일 챌린지] : 10일차 체크 박스를 만들어서 체크가 되면 선이 그어지도록 만들었다. 이런식으로 작동하게 된다. 2022. 2. 6. 이전 1 2 다음 반응형
