코알누 - News

URL에 쿼리 더하기

url.searchParams.set("page", page)

 

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

URLSearchParams - Web APIs | MDN

 

 

페이지네이션

const paginationRender = () => {
  const totalPage = Math.ceil(totalResult / pageSize);
  const pageGroup = Math.ceil(page / pageGroupSize);
  const lastPage =
    pageGroup * pageGroupSize > totalPage
      ? totalPage
      : pageGroup * pageGroupSize;
  const firstPage =
    lastPage - (pageGroupSize - 1) < 1 ? 1 : lastPage - (pageGroupSize - 1);
  let paginationHTML = ``;
  if (page !== 1) {
    paginationHTML = `
  <li class="page-item" onclick="moveToPage(${firstPage})"><a class="page-link" href="#">&lt&lt</a></li>
  <li class="page-item" onclick="moveToPage(${
    page - 1
  })"><a class="page-link" href="#">&lt</a></li>`;
  }

  for (let i = firstPage; i <= lastPage; i++) {
    paginationHTML += `
<li class="page-item ${
      i === page ? "active" : ""
    }" onclick="moveToPage(${i})"><a class="page-link" href="#">${i}</a></li>
`;
  }

  if (page !== lastPage)
    paginationHTML += `<li class="page-item" onclick="moveToPage(${
      page + 1
    })"><a class="page-link" href="#">&gt</a></li>
  <li class="page-item" onclick="moveToPage(${lastPage})"><a class="page-link" href="#">&gt&gt</a></li>`;

  document.querySelector(".pagination").innerHTML = paginationHTML;
};

 

- 카테고리 관련

// 카테고리 할당
const menus = document.querySelectorAll(".menus button");
menus.forEach((menu) =>
  menu.addEventListener("click", (e) => {
    // 선택된 카테고리 외 class 제거
    menus.forEach((otherMenu) => otherMenu.classList.remove("selected"));
    // 선택된 카테고리 class 할당
    e.target.classList.add("selected");
    getNewsCategory(e);
  })
);

const getNewsCategory = (e) => {
  category = e.target.textContent.toLowerCase();
  url.searchParams.set("category", category);
  getNews();
};

 

- 커서올리면 삭제

searchInput.addEventListener("focus", () => {
  searchInput.value = "";
});