Studying Coding Studying Coding

Html history vision goals ..... ..... ..... CSS .tab-btn{ background:gray; } .content{ display:none; } .active{ display:block; } Javascript const contents = document.querySelectorAll(".content"); const btns = document.querySelectorAll(".tab-btn"); const container = document.querySelector(".about") container.addEventListener("click",(e)=>{ const id = e.target.dataset.id; if(id){ btns.forEach((btn..

Html video Project play pause CSS - switch button .switch{ position: absolute; width: 50%; height: 100%; top: 0; left: 0; background: var(--clr-primary-5); border-radius: var(--radius); margin: 0; display: block; transition: var(--transition); } .slide .switch { left: 50%; } Javascript const btn = document.querySelector(".switch-btn"); const video = document.querySelector(".video-container"); bt..

map : 기존의 array 에서 특정기준에 맞는 data만 return 한다. 새로운 array로 return 한다. filter : 특정기준에 맞는 data를 선별해서 새로운 array를 바꿔서 return 한다. * filter 에서는 callback함수를통해 요소를 시험한다. true를 반환하면 요소를 유지하고, false이면 반환하여 버린다. - map arr.map(callback(currentValue[, index[, array]])[, thisArg]) https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-map-%EA%B3%BC-filter-%EC%B0%A8%EC%9D%B4

JavaScript에 reduce 기능에 대해 알아보자! reduce의 정의 - array의 값을 줄이는데에 사용이 된다. - 원래 array는 변화시키지 않는다. const numbers = [15.5, 2.3, 1.1, 4.7]; numbers.reduce(getsum,0); function getsum(total, num){ return total + Math.round(num) } //24 Syntax array.reduce(function(total, currentValue,currentIndex,arr), initialValue) Example function displayMenuButtons(){ const categories = menu.reduce( function(values, item..

각각의 버튼을 클릭할때 마다 그 정보가 담긴 tab으로 화면이 변경된다. HTML CODE history // data-id를 설정해서 // 밑에 content의 id들과 연결시킴 vision goals history ... vision ... goals ... Java Script CODE const about = document.querySelector('.about'); const btns = document.querySelectorAll('.tab-btn'); const contents = document.querySelectorAll('.content'); about.addEventListener('click', (e)=>{ const id = e.target.dataset.id; if(id){..