본문 바로가기

JavaScript30 Challenge

 (26)
[JavaScript30] Day 30 Whack A Mole const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); function randomTime(min, max) { return Math.round(Math.random() * (max- min) + min); } Math.random()으로 숫자를 가져오면 숫자가 정수로 나오지 않는다. 그래서 Math.round()으로 정수로 만들어 준다. function randomHole(holes) { console.log(holes.length); } function rando..
[JavaScript30] Day 29 Countdown Timer function timer(seconds) { setInterval(function() { seconds--; }, 1000); } 이렇게 매 초마다 1초씩 줄어들게 하는 것은 가끔 작동하지 않는 오류가 있다. 예를 들어 해당 탭을 오랫동안 켜지않을 경우에는 타이머가 멈추게 된다. function timer(seconds) { const now = Date.now(); // Date.now() = (new Date()).getTime(); const then = now + seconds * 1000; console.log({now, then}); } then에서 1000을 곱해준것은 초를 밀리초로 바꾸기 위해서 이다. ( 1s = 1000ms ) function timer(s..
[JavaScript30] Day 28 Video Speed Controller const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector('.flex'); speed.addEventListener('mousemove', function(e) { console.log(e); }); bar에 마우스가 enter되면 좌표를 출력해 줍니다. const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector(..
[JavaScript30] Day 27 Click and Drag const slider = document.querySelector('.items'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', () => { isDown = true; }); slider.addEventListener('mouseleave', () => { isDown = false; }); slider.addEventListener('mouseup', () => { isDown = false; }); slider.addEventListener('mousemove', () => { console.log(isDown); console.log('Do Work!!') })..
[JavaScript30] Day 26 Stripe Follow Along Nav const triggers = document.querySelectorAll('.cool > li'); const background = document.querySelector('.dropdownBackground'); const nav = document.querySelector('.top'); function handleEnter() { console.log('ENTER!!'); } function handleLeave() { console.log('LEAVE!!'); } triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter)); triggers.forEach(trigg..
[JavaScript30] Day 25 Event Capture, Propagation, Bubbling and Once const divs = document.querySelectorAll('div'); function logText(e) { console.log(this.classList.value); } divs.forEach(div => div.addEventListener('click', logText)); 제일 가운데의 coral컬러 박스를 클릭하면 one. two. three가 모두 클릭되게 된다. // console.log(this.classList.value) console.log(this) 이렇게 this로 확인하면 태그 전체로 확인할 수 있다. const divs = document.querySelectorAll('div'..
[JavaScript30] Day 24 Sticky Nav const nav = document.querySelector('#main'); const topOfNav = nav.offsetTop; function fixNav() { console.log(topOfNav); } window.addEventListener('scroll', fixNav); 스크롤을 해보면 계속 같은 숫자만 찍히는데 이 숫자가 nav의 현재 위치값이다 스크롤을해서 지나간 만큼은 window.scrollY로 알수있다. const nav = document.querySelector('#main'); const topOfNav = nav.offsetTop; function fixNav() { if (window.scrollY >= topOfNav) { document.b..
[JavaScript30] Day 22 Follow Along Link Highlighter const triggers = document.querySelectorAll('a'); const highlight = document.createElement('span'); highlight.classList.add('highlight'); document.body.append(highlight); function highlightLink() { console.log('Highlight!!'); } triggers.forEach(a => a.addEventListener('mouseenter', highlightLink)); link 부분에 마우스가 올라가면 console창에 Highlight 메세지가 뜬다. const triggers = docu..
[JavaScript30] Day 18 Adding Up Times with Reduce const timeNodes = document.querySelectorAll('[data-time]'); console.log(timeNodes); const timeNodes = document.querySelectorAll('[data-time]'); const seconds = timeNodes.map(node => node.dataset.time); const timeNodes = Array.from(document.querySelectorAll('[data-time]')); const seconds = timeNodes.map(node => node.dataset.time); 0은 분이고 1은 초이다 const timeNodes = Array...
[JavaScript30] Day 17 Sort Without Articles 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']; const sortedBands = bands.sort(function (a, b) { if(a > b) { return 1; } else { return -1; } }); console.log(sortedBands); const b..
[JavaScript30] Day 16 Mouse Move Shadow const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); function shadow(e) { console.log(e); } hero.addEventListener('mousemove', shadow); const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); function shadow(e) { // console.log(e); // const width = hero.offsetWidth; // const height = hero.offsetHeight; // 위의 두 줄을 아래의 ..
[JavaScript30] Day 15 LocalStorage 전송될 때, 발생하는 이벤트 생성 const addItems = document.querySelector('.add-items'); const itemsList = document.querySelector('.plates'); const items = []; function addItem(e) { console.log('Hello'); } addItems.addEventListener('submit', addItem); 전송을 하게 되면 Hello라는 글씨가 잠깐 나타났다 사라지는 것을 볼 수 있습니다. 전송하면서 페이지가 새로고침되기 때문인데 설정에서 Preserve log를 체크하면 log를 남길 수 있습니다. 전송되면서 페이지가 새로고침 되는 것을 방지 const addIte..
[JavaScript30] Day 14 JavaScript References VS Copying // start with strings, numbers and booleans let age = 100; let age2 = age; console.log(age, age2); age = 200; console.log(age, age2); let name = 'wes'; let name2 = name; console.log(name, name2); name = 'wesley'; console.log(name, name2); age2 = age 이지만, age가 재할당 된다고 해서, age2도 재할당되는 것은 아닙니다. 이것은 string에서도 동일합니다. // Let's say we have an array const players = ['Wes..
[JavaScript30] Day 13 Slide in on Scroll 스크롤하여 내려가다 이미지 있는 부분에 도달하면 이미지 애니메이션이 작동되는 기능 const sliderImages = document.querySelectorAll('.slide-in'); function checkSlide(e) { // console.log(e); // console.count(e); // console.log(window.scrollY); sliderImages.forEach(sliderImage => { // 이미지의 절반이 보이는 높이까지 스크롤되면 이미지 나옴 // half way throught the image const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.he..
[JavaScript30] Day 12 Key Sequence Detection wesbos라는 단어가 완성되면 이벤트가 실행된다. const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => { // console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); if(pressed.join('').includes(secretCode)) { console.log('DING DING!'); cornify_add(); } console.log(pressed); });
[JavaScript30] Day 11 Custom Video Player 특별할 건 없지만, 쉽게 접할수 있는 동영상 컨트롤러 만들기 // 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 skipButtons = player.querySelectorAll('[data-skip]'); cons..
[JavaScript30] Day 10 Hold Shift and Check Checkboxes Shift키를 누른 상태에서 아래의 다른 체크박스를 클릭하면 두 체크박스 사이의 모든 체크박스가 선택되는 기능입니다. 체크박스가 클릭 될때마다 실행되는 handleCheck라는 함수를 만듭니다. handleCheck에서는 Shift키를 누른채로 클릭을 했을 때, inBtween을 체크해서 true인 체크박스들 모두가 선택되도록 해준다. const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); //console.log(checkboxes); let lastChecked; function handleCheck(e) { // check if they had the shi..
[JavaScript30] Day 9 Dev Tools Domination 위와 같이 스크립트를 이용하여 왼쪽 텍스트를 클릭하면 오른쪽 텍스트처럼 변경될 때, 실제로 변경되는 내용을 확인하는 방법 스크립트가 실행되는 해당 소스에서 우클릭 → Break on → attribute modifications 버튼으로 스크립트 실행을 재개하거나 버튼으로 다음 단계의 스크립트를 확인할 수 있습니다. 위와 같이 보여주어 현재 실행되고 있는 스크립트를 알 수 있습니다. console // Regular console.log('hello'); // Interpolated console.log('hello I am a %s string', '💩') // 두번째것을 %s에 삽입 // %s 대신 ES6 문법 사용하는것도 가능 const poop = '💩' co..
[JavaScript30] Day 8 Fun with HTML5 Canvas const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.strokeStyle = '#bada55'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; let isDrawing = false; let lastX = 0; let lastY = 0; function draw(e) { console.log(e); } canvas.addEventListener('mousemove', draw); 마우스를 캔버스 위에..
[JavaScript30] Day 7 Array Cardio Day 2 // const isAdult = people.some(function(person) { // const currentYear = (new Date()).getFullYear(); // if(currentYear - person.year >= 19) { // return true; // } // }); const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19); console.log({isAdult}); const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); consol..

티스토리툴바