[KDT]FCFE - 4주5일 js mini project (bankApp) 4. 스타일링( contents )

Keunyeong Lee·2021년 12월 17일
0
post-thumbnail

미니프로젝트

4.스타일링

미리 잡아놓은 마크업을 토대로 스타일링

전체 구역별로 배치하기

배치에 편하게 border를 넣어서 색별로 표기하며 배치를 잡는다.

border라인의 두께가 배치에 영향을 주기 때문에

box-sizing: border-box; 로 borer를 안으로 포함시킨다.

json 데이터 받기

fetch(url)
.then(res=>res.json())
.then(function(data){
	console.log(data);
});

fetch 함수를 이용해 json 데이터를 요청하고 받아와서 활용.

받아온 json 데이터를 필요에 맞게 출력되도록 한다.

필요한 데이터는

data.bankList

배열.

먼저 최신순으로 하기위해

data.bankList.reverse();

뒤집고

날짜 별로 출력하기위해

날짜만 뽑아서 중복 제거

const dateArr = [];
//날짜만 뽑고
for(let i=0; i < data.bankList.length; i++){
  dateArr.push(data.bankList[i].date);
};
//중복제거
const set = new Set(dateArr);
const newDateArr = [...set];

뽑은 날짜로 data.bankList에서 날짜별 시작 index를 뽑아 배열로 만들기

let dateFindIndexArr = [];
for(let i=0; i<newDateArr.length; i++){
  dateFindIndexArr.push(data.bankList.findIndex(n=>n.date==newDateArr[i]));
};
// 날짜별로 인덱스 시작부터 다음 날짜 인덱스 까지 뽑기때문에 배열 마지막 인덱스 넣어주기
dateFindIndexArr.push(data.bankList.length);

중복없이 날짜만 넣은 배열의 길이만큼 반복하며

각 날짜마다 날짜시작 index배열로

날짜 시작일부터 다음 날짜 시작일까지 뽑는 방식으로

data.bankList[0].history;
data.bankList[0].price;

로 값 뽑아서 ul li element 만들어 필요한 곳에 넣기!

for(let i=0; i<newDateArr.length; i++){
  const liEle=document.createElement('li');
  const pEle = document.createElement('p');
  const ulEle = document.createElement('ul');
      
  pEle.textContent=newDateArr[i];
      
  liEle.appendChild(pEle);
      
  for(let j=dateFindIndexArr[i];j<dateFindIndexArr[i+1];j++){
    const li2Ele = document.createElement('li');
    const pEle = document.createElement('p');
    const span1Ele = document.createElement('span');
    const span2Ele = document.createElement('span');
    const hrEle = document.createElement('hr');
    span1Ele.textContent=data.bankList[j].history;
    span2Ele.textContent=data.bankList[j].price;
    li2Ele.setAttribute("class","contents__history__list__el");
    li2Ele.appendChild(span1Ele);
    li2Ele.appendChild(span2Ele);
    ulEle.appendChild(li2Ele);
    ulEle.appendChild(hrEle);
  }
  liEle.appendChild(ulEle);
  sectionEle.appendChild(liEle);
}

click event로 contents 부분 확장

contents 부분을 화면 전체 크기로 만들고 postion으로 아래로 자리 잡도록 함

전체 화면에 overflow:hidden; 으로 contents 의 일부분만 보이도록 한다.

contents 상단의 버튼을 누르면 class 를 추가하는 방식으로 style이 적용되도록 한다.

position 값을 top:0 로 만들어 위치 시킨다.

transition: 1s ease; 로 올라가는 애니메이션 효과를 준다.

특정 class 가 포함되는지 확인하여 없으면 추가하여 올라가고

있으면 제거하여 내려오도록 한다.

차후 touch swipe event 발생으로 변경

profile
🏃🏽 동적인 개발자

0개의 댓글