How To Display A Simple GitHub Profile With JavaScript

Hello friends, welcome! In this tutorial, I will share a guide on how to display a simple GitHub profile using JavaScript. In this case, I will leverage web technologies such as HTML and JavaScript. The code provided has been commented by the author to facilitate your understanding of the algorithm behind the code.

Github

Github is a website used to store and manage the code of a project. With Github, you can create, upload, and access code online for free. It is built on two main systems, version control and Git. Version control is a system that keeps track of all code changes in a project. On the other hand, Git is a distributed version control system that allows for the history of code changes to be accessed by all users within a project.

In JavaScript, the author will utilize the fetch feature, which makes it easier to request data from the Github service. Later, the author will display this data in their HTML document. It's important to note that when making a request to the Github service, it will return a JSON file. Alright, let's begin the tutorial below!

Tutorial

  1. First, open your text editor to create the HTML and JavaScript files. Here, the author is using microsoft visual studio code as the text editor, but feel free to use any text editor of your choice to follow this tutorial.
  2. Create a folder named github-profile to store the HTML and JavaScript files.
  3. Next, create a file named index.html to create the HTML file, and create a file named script.js to create the JavaScript file. Then, place these files in the previously created folder named github-profile.
  4. For the index.html file, you can see the script below:
    5. <html>
  <head>
    <title>Github Profile</title>
  </head>

  <body>
    <div style="text-align: center; margin-top: 50px">
      <!-- Create heading -->
      <h1>GITHUB PROFILE</h1>

      <!-- Create div to display GitHub profile picture -->
      <div id="avatar"></div>

      <!-- Create search column -->
      <input type="text" id="find" placeholder="find the username" />

      <!-- Create button -->
      <button type="button" style="margin-top: 20px">Find</button>

      <!-- Create table -->
      <table
        style="
          margin-left: auto;
          margin-right: auto;
          border: 1px solid;
          margin-top: 20px;
        "
        cellpadding="10"
      >
        <tr>
          <!-- Create table headers -->
          <th style="border: 1px solid">Name</th>
          <th style="border: 1px solid">Bio</th>
          <th style="border: 1px solid">Location</th>
        </tr>

        <tr>
          <!-- Create table data to put the github profile -->
          <td style="border: 1px solid"></td>
          <td style="border: 1px solid"></td>
          <td style="border: 1px solid"></td>
        </tr>
      </table>
    </div>

    <script src="script.js"></script>
  </body>
</html>

  5. To create the script.js file, you can refer to the script below:
    6. // Create variables
let avatar = document.getElementById("avatar");
let tableData = document.querySelectorAll("td");
let searchInput = document.getElementById("find");
let button = document.getElementsByTagName("button")[0];

// When the button is clicked
button.addEventListener("click", function () {
  // Whatever is typed by me
  fetch("https://api.github.com/users/" + searchInput.value)
    // Parsing JSON data
    .then((res) => res.json())
    // Then display the data in the HTML document
    .then((data) => {
      avatar.innerHTML = `<img src="${data.avatar_url}" style="width:250px;height:250px;">`;
      for (let i = 0; i < tableData.length; i++) {
        tableData[0].innerText = `${data.name}`;
        tableData[1].innerText = `${data.bio}`;
        tableData[2].innerText = `${data.location}`;
      }
    });
});

  6. Once you have it, you can open the index.html file located in the github-profile folder to display the results in your web browser.
  7. To display the github profile, you can enter the username in the search field. For example, you can search for my github username galihap76 and it will appear as follows:
  8. Great! You can now edit the script according to your learning needs. Feel free to modify and customize the existing code to suit your requirements.

Closing

Once again, this article only covers and utilizes HTML and JavaScript for web development. The code provided above can indeed incorporate CSS for website styling and centering elements. I hope you find this information useful.