(API활용) 깃허브 유저찾기 app 2

//유저 이름을 입력창에서 가져오기
function 유저카드내용입력(user) {
  const userID = user.name || user.login; //name이 있으면 name OR login id
  const userBio = user.bio ? `<p>${user.bio}</p>` : "";
  const cardHTML = `
    <div class="card">
    <div>
      <img src="${user.avatar_url}" alt="${user.name}" class="avatar">
    </div>
    <div class="user-info">
      <h2>${userID}</h2>
      ${userBio}
      <ul>
        <li>${user.followers} <strong>Followers</strong></li>
        <li>${user.following} <strong>Following</strong></li>
        <li>${user.public_repos} <strong>Repos</strong></li>
      </ul>

      <div id="repos"></div>
    </div>
  </div>
  `;
  main.innerHTML = cardHTML;
}

 

async function getUser(username) {
  try {
    const { data } = await axios(API_URL + username);
    유저카드내용입력(data);
  } catch (error) {
    if (error) {
      console.log(error);
    }
  }
}

 

 

테스트하기

 

 

 

 

 

내 깃허브도 검색해봄

 

 

 

 

이제 저장소도 추가해주면 됨 

//저장소 가져오기
async function getRopos(username) {
  try {
    const { data } = await axios(API_URL + username + "/repos?sort=created");
    저장소이름입력(data);
  } catch (error) {
    if (error) {
      에러메세지카드("Problem fetching repos");
    }
  }
}

function 저장소이름입력(repos) {
  const reposE1 = document.getElementById("repos");

  repos.slice(0, 5).forEach((repo) => {
    const repoE1 = document.createElement("a");
    repoE1.classList.add("repo");
    repoE1.href = repo.html_url;
    repoE1.target = "_blank";
    repoE1.innerText = repo.name;

    reposE1.appendChild(repoE1);
  });
}

 

 

그리고 submit 이벤트도 변경해주기 

form.addEventListener("submit", (e) => {
  e.preventDefault(); // submit 시 서버 전달 이벤트 중지
  const user = search.value;
  //console.log(user);
  if (user) {
    getUser(user); //유저 정보 가져오기
    getRopos(user); //유저 저장소 가져오기
    search.value = ""; // 입력값 초기화
  }
});