출처 : 20 mini projects )
section DOM Array Methods | forEach, map, filter, sort,
reduce, sectionMusic player | HTML5 Audio API
section Menu Slider & Modal | DOM & CSS
-Brad Traversy
사이드 바 만들 때 유용한 태그!
<aside>
<button id="add-user">Add User 👨</button>
<button id="double">Double Money 💰</button>
<button id="show-millionaires">Show Only Millionaires 💵</button>
<button id="sort">Sort by Richest ↓</button>
<button id="calculate-wealth">Calculate entire Wealth 🧮</button>
</aside>
main part tag
동일한 elements 중 첫번째 element를 선택한다.
li : first-of-types{
text-decoration : none;}
.modal-container{
position : fixed;
top : 0;
left : 0;
right : 0;
bottom : 0}
async 함수 내에서 data 값을 구하기 위해서는 res.json()까지 await 를 붙혀 변수에 값을 할당해줄 것! 그렇지 않으면 res.json()의 값으로 promise가 return 된다.
async function getRandomUser() {
const res = await fetch("https://randomuser.me/api");
const data = await res.json();
const user = data.results[0];
const newUser = {
name: `${user.name.first} ${user.name.last}`,
money: Math.floor(Math.random() * 100000),
};
addData(newUser);
}
객체를 복사하여, 몇가지 value값만 수정하고 싶은 경우,
key와 원하는 변경값을 직접 적어주면 된다. {...object, key : value}
const data = [{name : Hyojeong Kim, money : 200}]
function doubleMoney(){
data = data.map(user => {
return {...user, money:user.money*2;};
}
console.log(doubleMoney()); // [{name : Hyojeong Kim, money : 400}]