takeU

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..

Key Sequence Detection 기본 코드 목표 누른 키가 콘솔창에 뜨도록 배열로 연결되어 뜨도록 하고, 비밀 키를 입력하면 유니콘이 나오도록 설정 과정 상수 설정 이벤트 리스너 생성 및 효과 설정 코드 분석 1. 상수 설정 const pressed = []; const secretCode = 'wesbos'; 빈 배열 pressed와 비밀코드가 담긴 secret을 만든다 2. 이벤트 리스너 생성 및 효과 설정 window.addEventListener('keyup', e => { console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); if (..

Custom Video Player 기본 코드 ► « 10s 25s » 목표 동영상 플레이어의 각종 기능을 자바스크립트로 구현 과정 상수 생성 함수 생성 코드 분석 1. 상수 생성 /* Get Our Elements */ 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 skipButt..

Hold Shift and Check Checkboxes 기본 코드 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything inbetween should also be set to checked Try do it with out any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 목표 shift키로 체크박스를 동시에 체크 할 수 있는 기능을 추가하는 것 과정 함수 작성에 필요한 변수, 상수 작성 함수 생성 함수 호출 코드 분석 1. 함수작성에 필요한 변수, 상수 작성 const checkboxe..

Dev Tools Domination 기본 코드 ×BREAK×DOWN× 목표 콘솔창에 각종 연산 및 효과를 넣는 방법들을 익힘 과정 Regular, Interpolated, Styled Warining, Error, Info Testing, clearing, Viewing DOM Elements Grouping together, counting, timing 코드 분석 1. Regular, Interpolated, Styled // Regular console.log('hello'); 기본 콘솔 출력 // Interpolated console.log('Hello I am a %s string!', '💩'); %s 자리에 ,뒤의 값이 들어감 // Styled console.log('%c I am some ..

Fun with HTML5 Canvas 기본 코드 목표 제목 그대로 HTML에 캔버스를 만들어 각종 효과를 넣어보는 연습 과정 그리기 효과를 사용하기 위한 기본 설정 그리기 효과를 실시간으로 변경하기 위한 변수 설정 그리기 효과를 실시간으로 변경하기 위한 함수 작성 그리기 효과를 실시간으로 바꾸는 함수 실행 코드 분석 1. 그리기 효과를 사용하기 위한 기본 설정 const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.strokeStyle = '#BADA55'; ctx.lineJo..

Array Cardio Day 2 기본 코드 Psst: have a look at the JavaScript Console 💁 목표 Array Cardio Day1에 이어 각종 자바스크립트 메소드를 익혀봄 과정 some() every() find() findIndex(), slice() 코드 분석 1. some() // Array.prototype.some() // is at least one person 19 or older? const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); console.log({ isAdult }); 기본 코드에서 선언한 people에 19살 이상이 한명 이상 있는지 알아보..