[TIL] CSS) position : fixed 후 화면 전체 채우기, JS) await 변수 할당, map method를 이용하여 객체 부분 수정하기

Hyodduru ·2022년 1월 15일
0

TIL

목록 보기
4/8
post-thumbnail

출처 : 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

HTML Part

aside tag

사이드 바 만들 때 유용한 태그!

<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 tag

main part tag

CSS part

first-of-types

동일한 elements 중 첫번째 element를 선택한다.

li : first-of-types{
		text-decoration : none;}

position : fixed 후 화면 전체 채우기

.modal-container{
	position : fixed;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0}

JS part

async/ await

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);
}

map methods

객체를 복사하여, 몇가지 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}]                        
profile
꾸준히 성장하기🦋 https://hyodduru.tistory.com/ 로 블로그 옮겼습니다

0개의 댓글