CodeNewbie Community 🌱

Cover image for Commit9 //JavaScript Fundamentals [GitHub Repo Gallery]
Janet Webster
Janet Webster

Posted on • Edited on

Commit9 //JavaScript Fundamentals [GitHub Repo Gallery]

Picture of GitHub Repo Gallery

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

On to my second Skillcrush JavaScript project! For this one we will create a user friendly display of my GitHub Repo in a gallery.

Fetch User Data

First we connected the javascript to the github API so that I could pull information from my online profile.

// this div is where your profule information will appear
const overview = document.querySelector(".overview");
const username = "TwixmixyJanet";

const gitUserInfo = async function () {
    const userInfo = await fetch(`https://api.github.com/users/${username}`);
    const data = await userInfo.json();
    displayUserInfo(data);
}

gitUserInfo();

const displayUserInfo = function (data) {
    const div = document.createElement("div");
    div.classList.add("user-info");
    div.innerHTML = `
    <figure>
    <img alt="user avatar" src=${data.avatar_url} />
    </figure>
    <div>
    <p><strong>Name:</strong> ${data.name}</p>
    <p><strong>Bio:</strong> ${data.bio}</p>
    <p><strong>Location:</strong> ${data.location}</p>
    <p><strong>Number of public repos:</strong> ${data.public_repos}</p>
    </div>
    `;
    overview.append(div);
};
Enter fullscreen mode Exit fullscreen mode

I basically did code-along for this. Generally able to write the shell of the necessary code/functions and then I looked to the solution code for the specifics that I didn't grasp from reading the instructions.

Fetch Repo Data

That's so fetch!
I'm sure this is the millionth time this joke has been made about fetching data.

Basically we created two more functions to pull in the repo data and to display it.

// this div is where your profule information will appear
const overview = document.querySelector(".overview");
const username = "TwixmixyJanet";
const repoList = document.querySelector(".repo-list");

const gitUserInfo = async function () {
    const userInfo = await fetch(`https://api.github.com/users/${username}`);
    const data = await userInfo.json();
    displayUserInfo(data);
}

gitUserInfo();

const displayUserInfo = function (data) {
    const div = document.createElement("div");
    div.classList.add("user-info");
    div.innerHTML = `
    <figure>
    <img alt="user avatar" src=${data.avatar_url} />
    </figure>
    <div>
    <p><strong>Name:</strong> ${data.name}</p>
    <p><strong>Bio:</strong> ${data.bio}</p>
    <p><strong>Location:</strong> ${data.location}</p>
    <p><strong>Number of public repos:</strong> ${data.public_repos}</p>
    </div>
    `;
    overview.append(div);

    gitRepos();
};

const gitRepos = async function () {
    const fetchRepos = await fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=100`);
    const repoData = await fetchRepos.json();
    displayRepos(repoData);
};

const displayRepos = async function (repos) {
    for (const repo of repos) {
        const repoItem = document.createElement("li");
        repoItem.classList.add("repo");
        repoItem.innerHTML = `<h3>${repo.name}</h3>`;
        repoList.append(repoItem);
    }
};
Enter fullscreen mode Exit fullscreen mode

Display Repo Info

Now we made it so that you could click on each repo to display more information about it. Also you can click through to GitHub to see the uploaded scripts.

I'm still basically doing the same thing, typing up as much as I can and then resorting to use the solution code to get the specifics. I'm typing it all instead of copying and pasting so I take time to review the code.

// this div is where your profule information will appear
const overview = document.querySelector(".overview");
const username = "TwixmixyJanet";
const repoList = document.querySelector(".repo-list");
const allReposContainer = document.querySelector(".repos");
const repoData = document.querySelector(".repo-data");

const gitUserInfo = async function () {
    const userInfo = await fetch(`https://api.github.com/users/${username}`);
    const data = await userInfo.json();
    displayUserInfo(data);
}

gitUserInfo();

const displayUserInfo = function (data) {
    const div = document.createElement("div");
    div.classList.add("user-info");
    div.innerHTML = `
    <figure>
    <img alt="user avatar" src=${data.avatar_url} />
    </figure>
    <div>
    <p><strong>Name:</strong> ${data.name}</p>
    <p><strong>Bio:</strong> ${data.bio}</p>
    <p><strong>Location:</strong> ${data.location}</p>
    <p><strong>Number of public repos:</strong> ${data.public_repos}</p>
    </div>
    `;
    overview.append(div);

    gitRepos();
};

const gitRepos = async function () {
    const fetchRepos = await fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=100`);
    const repoData = await fetchRepos.json();
    displayRepos(repoData);
};

const displayRepos = async function (repos) {
    for (const repo of repos) {
        const repoItem = document.createElement("li");
        repoItem.classList.add("repo");
        repoItem.innerHTML = `<h3>${repo.name}</h3>`;
        repoList.append(repoItem);
    }
};

repoList.addEventListener("click", function (e) {
    if (e.target.matches("h3")) {
        const repoName = e.target.innerText;
        getRepoInfo(repoName);
    }
});

const getRepoInfo = async function (repoName) {
    const fetchInfo = await fetch(`https://api.github.com/repos/${username}/${repoName}`);
    const repoInfo = await fetchInfo.json();
    console.log(repoInfo);
    // Grab languages
    const fetchLanguages = await fetch(repoInfo.languages_url);
    const languageData = await fetchLanguages.json();

    // Make a list of languages
    const languages = [];
    for (const language in languageData) {
        languages.push(language);
    }

    displayRepoInfo(repoInfo, languages);
};

const displayRepoInfo = function (repoInfo, languages) {
    repoData.innerHTML = "";
    repoData.classList.remove("hide");
    allReposContainer.classList.add("hide");
    const div = document.createElement("div");
    div.innerHTML = `
    <h3>Name: ${repoInfo.name}</h3>
    <p>Description: ${repoInfo.description}</p>
    <p>Defualt Branch: ${repoInfo.default_branch}</p>
    <p>Languages: ${languages.join(", ")}</p>
    <a class="visit" href="${repoInfo.html_url}" target="_blank" rel="noreferrer noopener">View Repo on GitHub!</a>
    `;
    repoData.append(div);
};
Enter fullscreen mode Exit fullscreen mode

Create a Dynamic Search

I created the search function and the button event listener. For whatever reason it broke my code, so I am waiting for a TA to get back to me with a solution.

The issue was that I kept the "hide" in the classes for the button and search function. Once I removed the hide everything was all good.

I've published the project to my website: GitHub Repo Gallery Project

That's it for now! Next we will be moving on to JS React. I may take time to code-up a few JS based projects first, but we'll see.

Do you have a favorite project based in JS, CSS, and HTML? Send me the details! I'd love to check it out.

Top comments (0)

Read next

bog2544 profile image

Interest

Bog2544 -

jasonbrown112 profile image

How Null's Brawl Game Could Be Good for Health

jasonbrown112 -

vitaragshah profile image

How FinTech Software Development Services Simplify Integration with Existing Financial Systems

Vitarag -

swiftproxy profile image

Enhance Your Advertising Strategy with Proxies

swiftproxy -