[Develop] 23.06.30 개발 공부 일지

요약: 반응형 designHotel 제작, thefaceshop 공지사항 클론코딩

일시: 23.06.30 09:30~18:20

장소: 더휴먼컴퓨터아트아카데미

배운 점:

JSON 파일을 불러와, 사진을 load하는 웹페이지

const container = document.querySelector('.gallery-wrap');
const loadMoreBtn = document.querySelector('.loadMoreBt');

let addItemCount = 3;
let added = 0;
let allData = [];
let ItemHTML;

fetch('./data/video.json')
  .then(response => response.json())
  .then(data => {
    allData = data;
    addItem();
    loadMoreBtn.addEventListener('click', addItem);
  });

function addItem() {
  const element = [];
  const slicedData = allData.slice(added, added += addItemCount);

  slicedData.forEach(item => {
    ItemHTML = `
      <li class="Gallery-item">
        <div>
          <a href="javascript:" class="galleryBt">
            <span class="gallery-video">
              <video src="${item.video}" autoplay muted loop></video>
            </span>
            <span class="galleryCap"></span>
            <span class="gallery-title">
              <span><strong>${item.title}</strong></span>
              <span><b>${item.description}</b></span>
              <span><i class="exploreBt">Explore</i></span>
            </span>
          </a>
        </div>
      </li>
    `;
    const tempElement = document.createElement('div');
    // 문자열 좌우에서 공백을 제거하는 함수가 trim() 함수
    tempElement.innerHTML = ItemHTML.trim();
    const itemElement = tempElement.firstChild;
    element.push(itemElement);
  });

  element.forEach(item => {
    container.appendChild(item);
  });

  if (added >= allData.length) {
    loadMoreBtn.style.display = 'none';
  }
}

 

부족한 점: