미리 잡아놓은 마크업을 토대로 스타일링
배치에 편하게 border를 넣어서 색별로 표기하며 배치를 잡는다.
border라인의 두께가 배치에 영향을 주기 때문에
box-sizing: border-box; 로 borer를 안으로 포함시킨다.
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);
}
contents 부분을 화면 전체 크기로 만들고 postion으로 아래로 자리 잡도록 함
전체 화면에 overflow:hidden; 으로 contents 의 일부분만 보이도록 한다.
contents 상단의 버튼을 누르면 class 를 추가하는 방식으로 style이 적용되도록 한다.
position 값을 top:0 로 만들어 위치 시킨다.
transition: 1s ease; 로 올라가는 애니메이션 효과를 준다.
특정 class 가 포함되는지 확인하여 없으면 추가하여 올라가고
있으면 제거하여 내려오도록 한다.
차후 touch swipe event 발생으로 변경