Mini Projects (66) 썸네일형 리스트형 Wealth List (5) - filter() function showOnlyMios() { data = data.filter((elem) => elem.money > 1000000); updateDOM(); } filter 함수는 크게 어렵지 않았다 array에서 특정 조건을 만족하는 element들만 모아서 새로운 array를 return해준다. Wealth List (4) - sort () Sort by Richest 버튼을 눌렀을 때, 재산의 크기대로 정렬되도록 function sortByRichest() { data = data.sort((a, b) => { return b.money - a.money; }); updateDOM(); } data array를 받아오고 가장 돈이 많은 사람이 위로 올라가야 하기 때문에 a.money - b.money가 아니라 b.money - a.money 나는 처음에 sort() Method가 in-place 정렬인지 모르고 저렇게 다시 data에 넣어줬는데 그럴 필요가 없다. 그리고 arrow function을 더 간단하게 만들어주면 function sortByRichest() { data.sort((a, b) => b.money - a.money);.. Wealth List (3) - map() double money 버튼을 클릭하면 사람들의 재산이 2배가 되게 만들어 볼 것! 사용할 array 함수는 map() doubleBtn.addEventListener("click", doubleMoney); event listener을 만들고 function doubleMoney() { data = data.map((elem) => { return { name: elem.name, money: 2 * elem.money }; }); console.log(data); updateDOM(data); } 우선은 강의 보기 전에 내가 만들어 본 doubleMoney 함수다. 원래 data array를 받아와서 각 element의 name은 그대로, money만 두배를 해서 return 해준 후에 그 data .. Wealth List (2) - forEach function updateDOM(providedData = data) { main.innerHTML = "Person Wealth"; providedData.forEach((element) => { const div = document.createElement("div"); div.classList.add("person"); div.innerHTML = `${element.name} ${formatMoney( element.money )}`; main.appendChild(div); }); } - 함수의 parameter updateDOM함수를 호출할 때, parameter가 없으면 저번 시간에 생성했던 data array가 들어온다. - main.innerHTML 부분을 원래 가장 기본 코드로 넣어줘.. Wealth List (1) 특별히 예쁜 UI이거나, 엄청 유용해서 앞으로도 계속 사용할 프로그램은 아니고.. - fetchAPI를 이용해서 data를 받아와서 동적으로 화면에 표시 (.then을 이용해서 chain을 만들기 보다는 async/await를 이용해서 깔끔하게 구현) - forEach, map, sort, filter, reduce와 같은 Array method 를 연습하기 위한 프로젝트 1. get Elements const main = document.getElementById("main"); const userBtn = document.getElementById("user"); const doubleBtn = document.getElementById("double"); const showBtn = document.. Custom Exchage Rate Calculator (fetch API, 3rd Party API) 실시간 환율 받아올 곳 https://www.exchangerate-api.com/ ExchangeRate-API - Open Free & Pro Currency Conversion API Using ExchangeRate-API means relaxing while our currency converter API just works, 24/7! www.exchangerate-api.com 기본 UI 1. get Elements const currencyOne = document.getElementById("currency-one"); const amountOne = document.getElementById("amount-one"); const currencyTwo = document.getElemen.. Video and Audio APIs (MDN 정리) https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs Video and Audio APIs I think we've taught you enough in this article. The HTMLMediaElement API makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. See the "See also" section below for links to more comp developer.mozilla.or.. Movie Seat Booking (4) make Screen 3D parent element에 perspective 속성을 효과를 주려는 child element에 transform 속성을 줘서 3D로 만드는 방법 참고 https://3dtransforms.desandro.com/perspective Perspective · Intro to CSS 3D transforms Perspective To activate 3D space, an element needs perspective. This can be applied in two ways. The first technique is with the transform property, with perspective() as a function: transform: perspective(400px); For example.. 이전 1 2 3 4 5 6 7 8 9 다음
