GitHub Searcher

const fetchRepos = search => {
  const url = `https://api.github.com/search/repositories?q=${search}&sort=stars&order=desc0`;

  fetch(url)
    .then(response => response.json())
    .then(json => json.items)
    .then(reposArray => {
      reposArray.length = Math.min(reposArray.length, 12);

      const lisRepos = reposArray.reduce((accumulator, repo) => {
        const shortName = repo.name.substr(0, 26);

        accumulator += `
          <div class="card text-center border-dark">
            <div class="card-header text-white bg-dark">${shortName}</div>
              <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">${repo.owner.login}</h6>
                <div>
                  <img class="card-img-top w-25"src="./imgs/GitHub-Mark-black.png" alt="OctoCat">
                </div>
                <br /> <a href="${repo.html_url}" class="btn btn-info">Go Repo</a>
              </div>
              <div class="card-footer text-muted bg-light">
              updated at: ${repo.updated_at.slice(1, 10)}
              </div>
            </div>
          </div>
        `
        return accumulator
      }, '')

      if (reposArray.length === 0) {
        const ul = document.querySelector('[data-js="repos"]');
        const error = `
        <div class="alert alert-danger" role="alert">Not Matched Results!</div>
        `
        ul.innerHTML = error
      } else {

      const ul = document.querySelector('[data-js="repos"]')
      ul.innerHTML = lisRepos
    }

    })
}

const button = document.getElementById("button-addon1");

button.addEventListener("click", function () {
  const inputValue = document.getElementById("input").value;
  fetchRepos(inputValue)
})