JavaScript30 Challenge (26) 썸네일형 리스트형 [JavaScript30] Day 6 Type Ahead 자동 완성 기능 만들기 검색어의 일부를 입력했을 때 나올 수 있는 검색 결과를 미리 보여주는 기능이다. // 도시, 주, 인구 등의 자료가 들어있는 파일 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = []; //보통의 메서드를 사용하는 방식 fetch(endpoint, function() { console.log(data); }); fetch는 일반 함수를 사용하는 것과는 약간 다른 형식으로 사용한다. fetch는 promise를 return하기 때문에 .. [JavaScript30] Day 5 Flex Panel Gallery flex css 설정하기 .panels { display: flex; /* 자식요소가 필요로하는 만큼의 공간 */ } .panel { display: flex; flex: 1; justify-content: center; flex-direction: column; /* flex-direction : 주축 방향 설정 */ } /* Flex Children */ .panel > * { display: flex; flex: 1 0 auto; /* flex-grow flex-shrink flex-basis가 축약된 것 */ justify-content: center; /* justify-content : 주축을 기준으로 아이템을 어떻게 수평정렬할지 설정 */ align-item.. [JavaScript30] Day 4 Array Cardio Day 1 이번 강의에서는 할 수 있다고 생각되면 비디오를 중지하고 직접 시도해 보라는 얘기가 나와 할 수 있는 부분들을 해결했다. 아래는 내가 직접 해결해본 코드들이다. 4번은 못 풀었음. 6번은 문제 이해를 못했음. 8번은 해결은 했으나 검색해서 해결. // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const birth = inventors.filter( el => el.year >= 1500 && el.year < 1600 ? el : '' ); console.log(birth); // Array.prototype.map() // 2. Give.. [JavaScript30] Day 3 CSS Variables :root { --base: #ffc600; --spcing: 10px; --blur: 10px; } img { padding: var(--spcing); background: var(--base); filter: blur(var(--blur)); } .hl { color: var(--base); } css 사용자 정의 속성 변수는 이름 앞에 --를 붙여 사용 var()를 사용하여 변수를 정의 querySelectorAll로 선택된 리스트들은 배열이 아닌 NodeList로 배열에서 사용하는 map, reduce 등의 일부 메서드는 사용할 수 없음 const inputs = document.querySelectorAll('.controls input'); function handl.. [JavaScript30] Day 2 JS and CSS Clock function setDate() { console.log('Hi'); } setInterval(setDate, 1000); // 1초마다 hi라는 콘솔이 찍히는지 확인 function setDate() { const now = new Date(); const seconds = now.getSeconds(); console.log(seconds); } setInterval(setDate, 1000); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; // 초침의 시작은 12부터라서 90도를 더.. [JavaScript30] Day 1 JavaScript Drum Kit window.addEventListener('keydown', function(e) { /* body */ }, capture?: bollean); window.addEventListener('keydown', function(e) { console.log(e); }); window.addEventListener('keydown', function(e) { console.log(e.keyCode); }); window.addEventListener('keydown', function(e) { const audio = document.querySelector('audio[data-key="65"]'); }); window.addEventListener('keydown',.. 이전 1 2 다음
