githubacfinder/script.js at main · thenameisadityyaa/githubacfinder · 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
let search = document.querySelector(".search")
let usernameinp = document.querySelector(".usernameinp")
let card = document.querySelector(".card")


function getProfileData(username){
    return fetch(`https://api.github.com/users/${username}`).then((raw) => {
        if (!raw.ok) throw new Error("User not found!");
        return raw.json();
    });
}

function getRepos(username){
    fetch(`https://api.github.com/users/${username}/repos?sort=updated`).then((raw) => {
        if(!raw.ok) throw new Error("Repo not found!")
        return raw.json();
    });
}

function decorateProfileData(details){
    console.log(details);

    let data = ` <!-- Avatar -->
        <div class="w-32 h-32 shrink-0 rounded-full overflow-hidden border-4 border-purple-600">
          <img
            src="${details.avatar_url}"
            alt="Profile image"
            class="w-full h-full object-cover"
          />
        </div>

        <!-- Details -->
        <div class="flex-1 text-left space-y-3">
          <h2 class="text-2xl font-bold text-white">${details.name} <span class="text-purple-400 text-lg">@${details.
login}</span></h2>
          <p class="text-gray-300">${details.bio}</p>

          <div class="flex flex-wrap gap-6 mt-4 text-sm text-gray-400">
            <span class="text-white"><strong>Public Repos:</strong> ${details.public_repos}</span>
            <span class="text-white"><strong>Followers:</strong> ${details.followers
}</span>
            <span class="text-white"><strong>Following:</strong> ${details.following}</span>
            <span class="text-white"><strong>Location:</strong> ${details.location}</span>
            <span class="text-white"><strong>Website:</strong> <a href="${details.blog}" class="text-purple-400 hover:underline">${details.blog}</a></span>
          </div>

          <a href="${details.
html_url}" target="_blank" class="inline-block mt-4 bg-purple-600 hover:bg-purple-700 transition-all px-5 py-2 rounded-xl text-white font-medium">
            View GitHub Profile →
          </a>
        </div>`

    card.innerHTML = data
}


search.addEventListener("click",function() {
    let username = usernameinp.value.trim();
    if(username.length > 0){
        getProfileData(username).then((data) =>
            decorateProfileData(data)
        )
    }
    else{
        alert("Input field should not be empty")
    }
});