takeU

Follow Along Link Highlighter 목표 표시해놓은 링크에 포인터가 올라가면 효과를 주는 방법을 알아봄. 기본 코드 Home Order Status Tweets Read Our History Contact Us Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae! Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facili..

Geolocation 목표 나침반과 현재속도를 출력 기본 코드 0 KM/H 과정 상수 선언 현재위치, 속도 값 얻는 함수 생성 및 출력 코드 분석 1. 상수 선언 const arrow = document.querySelector('.arrow'); const speed = document.querySelector('.speed-value'); arrow와 speed에 요소들을 선택 2. 현재위치, 속도 값 얻는 함수 생성 및 출력 navigator.geolocation.watchPosition(data => { console.log(data); speed.textContent = data.coords.speed; arrow.style.transform = `rotate(${data.coords.headi..

Native Speech Recognition 목표 음성인식을 구현해 보려함 기본 코드 과정 브라우저에서 음성인식을 위해 설정 음성인식을 할 수 있도록 상수 생성 말한 내용을 p태그로 브라우저에 표시 이벤트 실행 코드 분석 1. 브라우저에서 음성인식을 위해 설정 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; 브라우저에 따라 webkit속성을 적용 2. 음성인식을 할 수 있도록 상수 생성 const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition에 음성인식을 할 수 있는 함수를 담아 반환값을 주..

Webcam Fun 목표 페이지로 사진을 찍을 수 있게 웹캠기능을 적용 기본 코드 Take Photo 과정 요소에 대응되는 상수 생성 화면에 웹캠 출력 웹캠의 크기, 위치조정 사진을 찍고, 저장할 수 있도록 함수 생성 웹캠에 효과 설정 레인지바 생성, 실행 코드 분석 1. 요소에 대응되는 상수 생성 const video = document.querySelector('.player'); const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); 2..

Adding Up Times with Reduce 목표 목록의 동영상들의 총 재생시간을 구하는 것 기본 코드 Video 1 Video 2 Video 3 Video 4 Video 5 Video 6 Video 7 Video 8 Video 9 Video 10 과정 배열 선언 동영상들의 총 재생시간을 초단위로 구함 총 재생시간을 시, 분, 초로 바꿔줌 코드 분석 1. 배열 선언 const timeNodes = Array.from(document.querySelectorAll('[data-time]')); timeNode에 [data-time]을 가진 태그들을 배열로 담아준다. 2. 동영상들의 총 재생시간을 초단위로 구함 const seconds = timeNodes .map(node => node.dataset..

Sort Without Articles 목표 배열의 내용에서 부사를 제거한 뒤 알파벳 순으로 재배열 기본 코드 과정 부사를 제거할 수 있는 함수 생성 배열을 재정렬 문서에 매핑 코드 분석 1. 부사를 제거할 수 있는 함수 생성 const strip = bandName => { return bandName.replace(/^(a |the |an )/i, '').trim(); } 인자로 bandName을 넣으면 내용중 a, the, an 을 공백으로 바꾸고 공백을 제거하는 함수 strip()을 생성 2. 배열을 재정렬 const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1); sortedBands에 bands의 내용을 알파벳 순서대로 재정..

Mouse Move Shadow 목표 마우스 움직임에 따라 텍스트에 효과가 적용돼 움직이도록 해보려 함 기본 코드 🔥WOAH! CSS코드는 뺐음 과정 함수 생성을 위한 상수 생성 그림자를 만드는 함수 생성 및 좌표값 기준 설정 마우스 이동시 그림자의 위치, 색상 설정 함수 호출 코드 분석 1. 함수 생성을 위한 상수 생성 const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); const walk = 500; // 100px hero에 클래스가 hero인 요소를 담고, text에 hero중 h1태그를 담고 walk에 500을 담음 2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정 const shadow = ..

LocalStorage 목표 아이템을 추가하고 리스트를 볼 수 있는 로컬저장소 구현하기 기본 코드 LOCAL TAPAS Loading Tapas... 기능없이 레이아웃만 잡혀있는 코드 과정 아이템을 추가하는 함수 생성 추가한 아이템을 리스트로 보여주는 함수 생성 체크 여부를 저장하는 함수 생성 함수 호출 코드 분석 1. 아이템을 추가하는 함수 생성 const addItem = e => { e.preventDefault(); const text = (e.target.querySelector('[name=item]')).value; const item = { text, done: false }; items.push(item); populateList(items, itemsList); localStorage...

JavaScript References VS Copying 목표 자바스크립트 참조와 복사의 차이에 대해서 공부 기본 코드 기본 코드가 전부 주석으로 필요한 코드만 남기고 다 지웠음 과정 변수 설정 이미지를 날아오게 할 함수 생성 함수 호출 코드 분석 1. 문자열, 숫자열, 불린일 때 변수 선언 및 변경 // start with strings, numbers and booleans let age = 100; let age2 = age; console.log(age, age2); // 100, 100 출력 age = 200; console.log(age, age2); // 200, 100 출력 문자열, 숫자열, 불린에서는 위와 같이 선언했던 변수에 다른 값을 넣으면 변경되어 출력된다. 2. 배열일 때 변수 ..

Slide in on scroll 목표 스크롤이 이미지 자리의 중간까지 오면 이미지가 양옆에서 날아오는 효과를 적용하려 함 기본 코드 Slide in on Scroll Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque pos..