let api =
let fetch =
document.createElement("script");
fetch.src =
`https:
fetch.integrity =
`ha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==`;
fetch.crossOrigin = "anonymous";
document.head.appendChild(fetch);
let main =
document.getElementById("main");
let inputForm =
document.getElementById("userInput");
let inputBox =
document.getElementById("inputBox");
const userGetFunction = (name) => {
axios(api + name)
.then((response) => {
userCard(response.data);
repoGetFunction(name);})
.catch((err) => {
if (
err.response.status ==
404) {
errorFunction(
"No profile with this username");}});}
const repoGetFunction = (name) => {
axios(
api +
name +
"/repos?sort=created")
.then((response) => {
repoCardFunction(
response.data);})
.catch((err) => {
errorFunction(
"Problem fetching repos");});}
const userCard = (user) => {
let id = user.name || user.login;
let info = user.bio
? `<p>${user.bio}</p>`: "";
let cardElement = `
<div class="card">
<div>
<img src="${user.avatar_url}"
alt="${user.name}"
class="avatar">
</div>
<div class="user-info">
<h2>${id}</h2>${info}<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 = cardElement}
const errorFunction = (error) => {
let cardHTML = `
<div class="card">
<h1>${error}</h1>
</div>`;
main.innerHTML = cardHTML}
const repoCardFunction = (repos) => {
let reposElement =
document.getElementById(
"repos");
for (let i = 0; i < 5 && i < repos.length; i++) {
let repo = repos[i];
let repoEl = document.createElement("a");
repoEl.classList.add("repo");
repoEl.href = repo.html_url;
repoEl.target = "_blank";
repoEl.innerText = repo.name;
reposElement.appendChild(repoEl);}}
inputForm.addEventListener("submit", (e) => {
e.preventDefault();
let user = inputBox.value;
if (user) {
userGetFunction(user);
inputBox.value = "";}});