bootstrap-project/index.js at main · SofiiCode/bootstrap-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
function displayDataUser(response) {
  let userCardElement = document.querySelector("#user-card");
  let userCardHTML = `<div class="header user-card-header d-flex flex-wrap justify-content-between">`;
  userCardHTML =
    userCardHTML +
    `<img src="${response.data.avatar_url}" class="rounded-circle img-start"  width="80" height="80"alt="user-photo">
                    <div class="user-name m-2">
                      <h5 class="card-title "><a href="${response.data.html_url}"  class="name-link">${response.data.name}</a></h5>
                      <p class="card-text "><a href="${response.data.html_url}"  class="sub-name-link">@${response.data.login}</a></p>
                    </div>
                    <a href="${response.data.html_url}"  class="btn btn-dark btn-follow" >Follow</a>
                </div>
                <div class="status d-flex mt-4  mb-2 p-2 text-uppercase border-light-subtle border-top border-bottom">
                  <div class="pe-3 ps-3 border-light border-end  ">
                    <h5 id="repos" class="card-title">${response.data.public_repos}</h5>
                  <p class="card-text"><a href="https://github.com/${response.data.login}?tab=repositories" >repos</a></p>
                  </div>
                  <div class=" pe-3 ps-3 border-light border-end  ">
                  <h5 id="gists" class="card-title">${response.data.public_gists}</h5>
                  <p  class="card-text"><a  href="https://gist.github.com/${response.data.login}">gists</a></p>
                  </div>
                  <div class="ps-3  ">
                    <h5 class="card-title">${response.data.followers}</h5>
                  <p class="card-text"><a   href="https://github.com/${response.data.login}?tab=followers">followers</a></p>
                  </div>
                </div>
                <div class="footer  p-2 ">
                  <p class="card-subtitle pt-2 fw-bold"> <a id="string" href="${response.data.html_url}"></a></p>
                </div>`;
  userCardHTML = userCardHTML + `</div>`;
  userCardElement.innerHTML = userCardHTML;

  if (`${response.data.hireable}` == "true") {
    let footer = document.querySelector("#string");
    footer.classList.add("green");
    footer.innerHTML = "Available for hire";
  } else if (`${response.data.hireable} ` == "false") {
    let footer = document.querySelector("#string");
    footer.classList.add("red");
    footer.innerHTML = "Not available for hire";
  } else {
    let footer = document.querySelector("#string");
    footer.innerHTML = "You can ask about hiring";
    footer.classList.add("grey");
  }
}

function getDataUser() {
  let userNameDiv = document.querySelector("#user-card");
  let userName = userNameDiv.dataset.user;
  let apiUrl = `https://api.github.com/users/${userName}`;
  axios.get(apiUrl).then(displayDataUser);
}
getDataUser();

const repoNameDiv = document.querySelector("#repo-container");

function displayDataRepo(response) {
  let userRepoElement = document.createElement("div");
  let lastDiv = repoNameDiv.lastChild;

  let insertedElement = repoNameDiv.insertBefore(userRepoElement, lastDiv);
  insertedElement.classList.add("repo-card");
  insertedElement.classList.add("p-2");
  insertedElement.classList.add("mb-3");
  insertedElement.classList.add("github-card");
  let userRepoHTML = `<div class="repo-header d-flex justify-content-between">`;
  userRepoHTML =
    userRepoHTML +
    `<img src="${response.data.owner.avatar_url}" class="rounded-circle img-start"  width="80" height="80"alt="user-photo">
                    <div class="user-name ms-1">
                         <h5 class="card-title "><a href="${response.data.html_url}" class="repo-name-link">${response.data.name}</a></h5>
                         <p class="card-text ">Forked by: <a href="${response.data.owner.html_url}" class="sub-name-link">@${response.data.owner.login}</a></p>
                   </div>
                       <a href="${response.data.html_url}" class="btn btn-dark btn-follow" >Star</a>
                   </div>
                   <div class="git-description border-bottom   mt-2 mb-2 p-2 ">
                     <div id="description" class="  pe-3 ps-2 fs-6">
                       <p  class=" repo-description card-text">${response.data.description}

                       </p>
                       <a class="overflow-x-hidden"  href="${response.data.html_url}" >${response.data.html_url}</a>
                     </div>
                   </div>
                   <div class="footer d-flex text-uppercase">
                     <div class="ps-2  d-flex ">
                       <p class="fw-bold m-0 pe-1">${response.data.forks}</p>
                       <p class="card-text">forks</p>
                     </div>
                     <div class="ps-2 d-flex ">
                       <p class="fw-bold m-0 pe-1">${response.data.stargazers_count}</p>
                       <p class="card-text">stars</p>
                     </div>
                     </div>`;
  userRepoHTML = userRepoHTML + "</div>";
  insertedElement.innerHTML = userRepoHTML;


  if (`${response.data.description}` === "null") {
    let description = document.querySelectorAll(".repo-description");
    let desc = description[description.length-1];
    desc.innerHTML=`<p> </p>`;
  } else {

  }
}
 function getDataRepo(repoinfo) {
   let repoName = repoinfo.dataset.repo;
   let userName = repoinfo.dataset.user;
   let apiUrl = `https://api.github.com/repos/${userName}/${repoName}`;
   axios.get(apiUrl).then(displayDataRepo);
 }
for (i = 0; i < repoNameDiv.childElementCount; ++i) {
  let repoinfoList = repoNameDiv.children;
  let repoinfo = repoinfoList[i];
  getDataRepo(repoinfo);
}