[Javascript] 데이터로 책 리스트 보여주기

이렇게 더보기 버튼을 누르면 추가의 책 자료들을 보여주는 ui를 만들었다. HTML은 거의 비워두고 자바스크립트로만 동작한다고 볼 수 있다.

 

HTML

  <div class="section">

    <div class="wrap">

      <ul class="content-box">

      </ul>

      <button class="more">더보기</button>

    </div>

  </div>

HTML은 큰 틀과 더보기 버튼만 담아두었다.

 

CSS

.content-box{

display: flex;

flex-wrap: wrap;

padding: 120px;

}

.content{

  padding: 40px;

  width: 300px;

  height: 500px;

}

.photo{

  width: 250px;

  height: 250px;

  background-color: #999;

  display: flex;

  align-items:center;

  justify-content: center;

  font-size: 40px;

}

.title{

  display: block;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  font-size: 40px;

}

.author, .price{

  display: block;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  font-size: 30px;

  margin-top: 20px;

}

.more{

  display: block;

  padding: 40px 60px;

  font-size: 40px;

  background-color: #666;

  border-radius: 40px;

  margin: 0 auto;

  cursor: pointer;

}

자바스크립트로 HTML요소들을 넣어줄 것이기 때문에 그 HTML 요소들에 CSS를 입히는 작업이다.

제목을 보면 본인 박스의 길이보다 넘치면 ...으로 생략되는 것을 볼 수 있는데 .title이나 .author, .price의 css 요소를 보면 display: block, white-space: nowrap; text-overflow:ellipsis; overflow: hidden 을 볼 수 있다. 위의 요소가 한 패키지처럼 이루어져야 ...으로 생략이 될 수 있다.

white-space: nowrap => 줄바뀜 방지

text-overflow: ellipsis => 글자가 넘치면 ...로 생략

overflow: hidden => 요소가 넘치면 보이지 않게 하기

 

JAVASCRIPT

let data1 = [

  { id : 0,

    title: '푸바오, 언제나 사랑해',

    author: '에버랜드 동물원',

    price: 20700

  },

  {id : 1,

    title: '하와이 대저택 100일 미라클',

    author: '하와아 대저택',

    price: 17820

  },

  {id : 2,

    title: '나는 메트로폴리탄 미술관의 경비원입니다',

    author: '패트릭 브링리',

    price: 15700

  },

  {id : 3,

    title: '마흔에 읽는 쇼펜하우어',

    author: '강용수',

    price: 15300

  }

]

let data2 = [

  { id : 4,

    title: '퓨처 셀프',

    author: '벤저민 하디',

    price: 17820

  },

  {id : 5,

    title: '사람과 돈이 따르는 센스 있는 3초 표현',

    author: '아소 사이카',

    price: 16200

  },

  {id : 6,

    title: '세이노의 가르침',

    author: '세이노',

    price: 6480

  },

  {id : 7,

    title: 'ETS 토익 정기시험 기출문제집 1000',

    author: 'ETS',

    price: 17820

  }

]

function contentBox (arr){

  arr.forEach(data => {

    let contentTemplate = `

    <li class="content">

    <div class="photo"><p>책${data.id + 1}</p></div>

    <h1 class="title">${data.title}</h1>

    <p class="author">${data.author}</p>

    <p class="price">가격 : ${data.price}원</p>

    </li>`

    document.querySelector('.content-box').insertAdjacentHTML('beforeend', contentTemplate);

  });

}

contentBox(data1);

function onClickMore(){

  contentBox(data2);

  document.querySelector('.more').style.visibility = 'hidden';

}

document.querySelector('.more').addEventListener('click', onClickMore);

이렇게 외부에서 데이터를 받아왔다는 가정하게 두개의 데이터 object 자료를 준비했고, 반복문을 활용해 기존 큰 틀에 content를 갯수만큼 넣어주게 했다. 저렇게 변수에 템플릿을 만들어놓고 insertAdjacentHTML을 이용해 템플릿을 삽입했다. beforeend의 의미는 끝나기 전, 즉 제일 마지막 부분에 템플릿을 넣어달라는 의미이다.

more버튼을 클릭하면 data2의 요소들을 넣어주고 more버튼은 없어지게 했다.

데이터를 더 불러와서 한 번 더 클릭했을 때 more버튼이 사라지게 하고 싶으면 count를 변수로 지정해서 숫자를 올려주고 그 숫자에 따라 다르게 동작하게 만들면 되지 않을까 싶다.