KEEP CODING

목표 마우스를 따라 내려오는 메뉴 만들기 내가 만든 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 const ul = document.querySelector('.cool'); const lists = document.querySelectorAll('.cool > li'); const triggers = Array.from(lists).map(list => list.querySelector('a')); const background = document.querySelector(".dropdownBackground") function dropDown() { const dropdown = thi..

목표 event의 특징에 대해 알아본다(bubbling, capturing) addEventListener의 변수에 대해 알아본다(capture, once) 특별한 목표가 없어서 코드를 따라서 작성했다. 1 2 3 4 5 6 7 8 const divs = document.querySelectorAll('div'); function logText(e) { console.log(this.classList.value); e.stopPropagation(); // stop bubbling } divs.forEach(div => div.addEventListener('click', logText, {capture: false})); cs div들에 addEventListener를 통해 클릭하면 console에 c..

목표 sticky nav 만들기(position: sticky를 사용하지 않음) nav가 맨 위에 있을 때, 왼쪽의 로고가 나타나도록 한다. 내가 만든 코드 1 2 3 4 5 6 7 8 9 10 11 12 const nav = document.querySelector('nav'); const logo = document.querySelector('.logo'); function setStickyNav(e) { nav.style.position = "sticky"; const navTopCoord = nav.getBoundingClientRect().top; if (navTopCoord = topOfNav) { document.body.classList.add('fixed-nav'); document.bo..

목표 SpeechSynthesis를 사용해 입력한 문장을 읽어주는 기능을 구현한다. 음성의 종류, 속도, 높이를 조절할 수 있도록 한다. 새롭게 알게된 것들 SpeechSynthesisUtterance utterance = 발화 무엇을 말할 것인지를 의미함 / 6가지 속성을 가진다. lang 언어 pitch 소리의 높이 rate 속도 text 읽을 내용 voice 음성의 종류 volume 소리의 크기 developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance SpeechSynthesis web speech API를 컨트롤 할 수 있는 인터페이스. 장치에서 사용가능한 합성 음성에 대한 정보를 검색하고, 음성을 일시중지 및 기타 명령 수행하는데 사용..

목표 link위에 마우스가 올라갔을 때, highlight가 마우스를 따라다니도록 한다. 사이트의 툴팁 메뉴ink위에 마우스가 올라갔을 때, highlight가 마우스를 따라다니도록 한다. 코드를 작성하기 전에 1 2 3 4 5 6 7 8 9 10 11 12 .highlight { transition: all 0.2s; border-bottom: 2px solid white; position: absolute; top: 0; background: white; left: 0; z-index: -1; border-radius: 20px; display: block; box-shadow: 0 0 10px rgba(0,0,0,0.2); } Colored by Color Scripter cs highlight 클..

실제 장치의 geolocation 정보를 가져와 화면에 방향과 속도를 나타낸다 Geolocation : 경도, 위도, 방향(북쪽에서 몇도?), 속도 의 정보를 가지고 있다. Chrome 에서 경도, 위도는 바꿀 수 있지만 방향과 속도는 바꿀 수 없다. iOS simulator를 사용해 코딩 결과를 확인할 수 있다. navigator.geolocation.getPosition(); 현재 위치를 알려준다 navigator.geolocation.watchPosition(); 장치의 위치가 바뀔 때 마다 자동으로 호출되어 위치를 알려줌 출처 : developer.mozilla.org/ko/docs/Web/API/Geolocation/watchPosition getPosition()도 위의 watchPositio..

Javascript만을 이용해서 음성인식 기능을 구현해본다. 새로운 문장이 아래로 추가된다. 컴퓨터에 마이크가 연결되어 있지 않아서 영상을 보면서 코딩을 따라해봤다. 1 2 3 4 5 6 7 8 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // instance 생성 const recognition = new SpeechRecognition(); // true이면 음절을 연속적으로 인식, false면 한 음절만 기록함 recognition.interimResults = true; recognition.start(); Colored by Color Scripter cs SpeechRecognitio..

오늘 만들 site에 필요한 기능 site에 webcam을 통해 찍는 영상을 가져온다 영상을 사진으로 찍는다 사진을 다운로드 한다 filter를 적용한다(redEffect, rgbSplit, greenScreen) 사용한 기능들 npm canvas canvas를 다뤄보지 않아서 영상을 보면서 코딩을 따라해봤다. 구현 순서대로 코드들을 정리해본다. 코드를 작성하기 전에 실시간으로 webcam -> video로 보여주기 위해 서버를 구동해야 한다. node.js를 다운로드 후 폴더에서 git BASH를 실행, npm start 라는 명령어를 통해 node server.js를 실행한다. index.html 1 2 3 4 5 cs script.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15..

1 2 3 4 5 6 7 8 9 Video 1 Video 2 Video 3 cs video list의 data-time에 있는 시간들을 가져와서 총 시간을 구하기 내가 적은 코드 1 2 3 4 5 6 7 8 9 10 11 const videos = document.querySelectorAll("li"); const videoTimes = Array.from(videos).reduce((total, video) => { const time = video.dataset.time; const splitTime = time.split(':'); const min = Number(splitTime[0]); const sec = Number(splitTime[1]); return total += (min * 60..

문자열에서 맨 앞의 a, an, the를 제거한 후 알파벳순으로 정렬하기 내가 작성한 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog']; function checkArticle(item) {..