50projectsIn50days – Day 28: Git Hub profile

Fetching GitHub user information is the core task of this project. This involves interacting with the GitHub API, which is facilitated using the Axios library.

The script is embedded in the HTML as follows:

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"
      integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ=="
      crossorigin="anonymous"
    ></script>

The HTML itself is initially empty. The creation of the user card and error card is handled by JavaScript functions. The createUserCard function is responsible for generating the user card:

function createUserCard(user) {
    const cardHTML = `
<div class="card">
    <div>
        <img src="${user.avatar_url}" alt ="${user.name}" class="avatar">
    </div>
    <div class="user-info">
        <h2>${user.name}</h2>
        <p>${user.bio}</p>
        <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
}

And this fuction is triggered by the event listener:

form.addEventListener('submit', (e) => {
    e.preventDefault()

    const user = search.value

    if(user) {
        getUser(user)

        search.value = ''
    }
})

Besides that, the other functions have this relationships:

• The form.addEventListener triggers the getUser function when the form is submitted.
• The getUser function makes an API call to fetch user data, then calls createUserCard to display this data.
• After creating the user card, getUser calls getRepos to fetch and display the user’s repositories.
• The getRepos function makes another API call and then calls addReposToCard to add the repositories to the card.
• If any errors occur (either in fetching user data or repositories), createErrorCard is called to display an error message.

You can see the code in this GitHub Repository: GitHub Profile and the demo of the project is here: 28.github_profile