![Cover image for Commit9 //JavaScript Fundamentals [GitHub Repo Gallery]](https://community.codenewbie.org/images/l2QGm5bzOPi7miazmUNcbTBK57-jGGh7sLHh2ibN6lc/rs:fill:1000:420/g:sm/mb:500000/ar:1/aHR0cHM6Ly9jb21t/dW5pdHkuY29kZW5l/d2JpZS5vcmcvcmVt/b3RlaW1hZ2VzL3Vw/bG9hZHMvYXJ0aWNs/ZXMvZjB3bWx5Ym4y/MGJnYjk2M2lrOXgu/cG5n)
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);
};
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
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);
}
};
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);
};
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)