DEV/JS3013 [JS30] day 4 - Array cadio day 1 1. Array.filter() const born = inventors.filter(inventor => 1500 inventor.first + inventor.last); console.log(fullname); console.table(fullname); dict 형태로 저장된 inventor 안에서 firstname과 lastname을 뽑아낸다 map() : arr.map(callback(currentValue[, index[, array]])[, thisArg]) filter와 유사하게 함수를 이용하지만 filter와 다른 점은 함수를 적용한 결과값을 모아 새로운 배열을 반환 한다는 점임(데이터가 바뀜) 3. sort const oldered = inventors.sort(function(a, .. 2021. 12. 9. [JS30] day 3 - playing with CSS variables and JS CSS 에도 variables(변수)이 존재한다 문서 전반적으로 재 사용할 값을 담아 root값을 변경하면 —variables를 가진 모든 개체의 값이 변경 사용은 var();로 사용 CSS variables를 JS로 조작 const inputs = document.querySelectorAll('.controls input'); function handleUpdate() { const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty('--$(this.name)', this.value + suffix); } inputs.forEach(input => input.addEventListener('change', ha.. 2021. 12. 7. [JS30] day 2 - CSS Clock HTML / CSS @font-face { font-family: 'LAB디지털'; src: url('') format('woff'); font-weight: normal; font-style: normal; } html { background: #121212 url(); background-size: cover; font-family: 'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; border: 1px .. 2021. 12. 6. [JS30] day 1 - drumkit HTML A clap S hihat D kick F openhat G boom H ride J snare K tom L tink data-key data-*** 형식으로 가지고 있는 속성 값을 부여해 주는 태그, data-아무거나 넣어도 된다! CSS/JS 모두 접근할 수 있으며 문법은 아래와 같다 👇 JS data-my-key ⇒ (속성을 가지고 있는 요소).dataset.myKey (속성을 가지고 있는 요소)[data-my-key="값"] { css구문~~ } 키보드가 가지고 있는 키 값을 알려주는 사이트 http://keycode.info/ CSS 사용 부분 .keys { display: flex; flex: 1; min-height: 100vh; align-items: center; justify.. 2021. 12. 5. 이전 1 2 3 4 다음
