火神项目搜索 - 查找 GitHub 上的开源项目

<p>共搜索到 <span class='total-count'></span> 个项目：</p>
<div class='result'>
</div>
<div class='pagination'>
</div>
<script>
  const searchForm = document.querySelector('form');
  const resultContainer = document.querySelector('.result');
  const paginationContainer = document.querySelector('.pagination');
  const totalCountElement = document.querySelector('.total-count');

  searchForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const searchTerm = document.getElementById('search').value;
    const page = 1;
    const url = `https://api.github.com/search/repositories?q=${encodeURIComponent(searchTerm)}&page=${page}`;

    try {
      const response = await fetch(url);
      const data = await response.json();
      totalCountElement.textContent = data.total_count;
      resultContainer.innerHTML = '';
      paginationContainer.innerHTML = '';
      if (data.items.length > 0) {
        data.items.forEach(item => {
          resultContainer.innerHTML += `<p><a href='${item.html_url}' target='_blank'>${item.full_name}</a></p>
          <p>${item.description}</p>
          <hr>`;
        });
        const pages = Math.ceil(data.total_count / 30);
        if (pages > 1) {
          paginationContainer.innerHTML = '<a href='#' data-page='1'>首页</a>';
          for (let i = 1; i <= pages; i++) {
            paginationContainer.innerHTML += `<a href='#' data-page='${i}'>${i}</a>`;
          }
          paginationContainer.innerHTML += '<a href='#' data-page='${pages}'>尾页</a>';

          const paginationLinks = paginationContainer.querySelectorAll('a');
          paginationLinks.forEach(link => {
            link.addEventListener('click', async (event) => {
              event.preventDefault();
              const page = link.dataset.page;
              const url = `https://api.github.com/search/repositories?q=${encodeURIComponent(searchTerm)}&page=${page}`;
              try {
                const response = await fetch(url);
                const data = await response.json();
                resultContainer.innerHTML = '';
                data.items.forEach(item => {
                  resultContainer.innerHTML += `<p><a href='${item.html_url}' target='_blank'>${item.full_name}</a></p>
                  <p>${item.description}</p>
                  <hr>`;
                });
              } catch (error) {
                console.error(error);
              }
            });
          });
        }
      } else {
        resultContainer.innerHTML = '<p>未找到任何项目。</p>';
      }
    } catch (error) {
      console.error(error);
      resultContainer.innerHTML = '<p>搜索失败，请稍后重试。</p>';
    }
  });
</script>