From 902e118623c588d8a8ede5672b05f6bd7bf9809d Mon Sep 17 00:00:00 2001 From: annie_i Date: Tue, 8 Jun 2021 13:27:40 +0100 Subject: [PATCH 1/4] Initial commit --- js/script.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/js/script.js b/js/script.js index e69de29b..1b24933e 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,29 @@ +const overview = document.querySelector(".overview"); //overview is where profile information will go +const username = "AnnieCat73"; + +const getGitUserInfo = async function () { + const gitUserInfo = await fetch (`https://api.github.com/users/${username}`); + const data = await gitUserInfo.json(); + console.log(data); + displayUserInfo(data); +}; + +getGitUserInfo(); + +const displayUserInfo = function (data) { //data points to json + const div = document.createElement("div"); + div.classList.add("user-info"); + div.innerHTML = ` +
+ user avatar +
+
+

Name: ${data.name}

+

Bio: ${data.bio}

+

Location: ${data.location}

+

Number of public repos: ${data.public_repos}

+
+ `; + overview.append(div); +}; + From 29b732e0ba61ddd1d52bb97bb24d227f1e3c5096 Mon Sep 17 00:00:00 2001 From: annie_i Date: Tue, 8 Jun 2021 14:18:55 +0100 Subject: [PATCH 2/4] Fetch repo data --- js/script.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/js/script.js b/js/script.js index 1b24933e..4440b317 100644 --- a/js/script.js +++ b/js/script.js @@ -1,5 +1,7 @@ const overview = document.querySelector(".overview"); //overview is where profile information will go const username = "AnnieCat73"; +const repoList = document.querySelector(".repo-list"); //ul to display the repo list + const getGitUserInfo = async function () { const gitUserInfo = await fetch (`https://api.github.com/users/${username}`); @@ -24,6 +26,23 @@ const displayUserInfo = function (data) { //data points to json

Number of public repos: ${data.public_repos}

`; - overview.append(div); + overview.append(div); + getGitRepos(); +}; + +const getGitRepos = async function () { + const fetchRepos = await fetch (`https://api.github.com/users/${username}/repos?sort=updated&per_page=100`); + const repoData = await fetchRepos.json(); + console.log(repoData); + repoInfo(repoData); +} + +const repoInfo = function (repos) { + for(const repo of repos) { + const li = document.createElement("li"); + li.classList.add("repo"); + li.innerHTML = `

${repo.name}

`; + repoList.append(li); + } }; From 17888d0f1ba8e15f8ffca3beaad166c18d629af4 Mon Sep 17 00:00:00 2001 From: annie_i Date: Tue, 8 Jun 2021 19:08:45 +0100 Subject: [PATCH 3/4] Display repo info --- js/script.js | 44 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/js/script.js b/js/script.js index 4440b317..dea84963 100644 --- a/js/script.js +++ b/js/script.js @@ -1,6 +1,8 @@ const overview = document.querySelector(".overview"); //overview is where profile information will go const username = "AnnieCat73"; const repoList = document.querySelector(".repo-list"); //ul to display the repo list +const repos = document.querySelector(".repos");//section where all repo info lives +const repoData = document.querySelector(".repo-data");//individual repo data appear const getGitUserInfo = async function () { @@ -33,9 +35,9 @@ const displayUserInfo = function (data) { //data points to json const getGitRepos = async function () { const fetchRepos = await fetch (`https://api.github.com/users/${username}/repos?sort=updated&per_page=100`); const repoData = await fetchRepos.json(); - console.log(repoData); + //console.log(repoData); repoInfo(repoData); -} +}; const repoInfo = function (repos) { for(const repo of repos) { @@ -46,3 +48,41 @@ const repoInfo = function (repos) { } }; +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); + + const fetchLanguages = await fetch(repoInfo.languages_url); + const languageData = await fetchLanguages.json(); + //console.log(languageData); + + const languages = []; + for(const language in languageData) { + languages.push(language); + //console.log(languages); + } + displayRepoInfo(repoInfo, languages); +}; + +const displayRepoInfo = function (repoInfo, languages) { + repoData.innerHTML = ""; + repoData.classList.remove("hide"); + repos.classList.add("hide"); + const div = document.createElement("div"); + div.innerHTML = ` +

Name: ${repoInfo.name}

+

Description: ${repoInfo.description}

+

Default Branch: ${repoInfo.default_branch}

+

Languages: ${languages.join(", ")}

+ View Repo on GitHub! + `; + repoData.append(div); +}; From 998049bb1c68980bed11ce3ca0b2e23a49d1545c Mon Sep 17 00:00:00 2001 From: annie_i Date: Wed, 9 Jun 2021 12:40:47 +0100 Subject: [PATCH 4/4] Final edits and search feature --- js/script.js | 45 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/js/script.js b/js/script.js index dea84963..3586823f 100644 --- a/js/script.js +++ b/js/script.js @@ -1,20 +1,21 @@ -const overview = document.querySelector(".overview"); //overview is where profile information will go +const overview = document.querySelector(".overview"); const username = "AnnieCat73"; -const repoList = document.querySelector(".repo-list"); //ul to display the repo list -const repos = document.querySelector(".repos");//section where all repo info lives -const repoData = document.querySelector(".repo-data");//individual repo data appear +const repoList = document.querySelector(".repo-list"); +const allReposContainer = document.querySelector(".repos"); +const repoData = document.querySelector(".repo-data"); +const backToRepoBtn = document.querySelector(".view-repos"); +const filterInput = document.querySelector(".filter-repos"); const getGitUserInfo = async function () { const gitUserInfo = await fetch (`https://api.github.com/users/${username}`); const data = await gitUserInfo.json(); - console.log(data); displayUserInfo(data); }; getGitUserInfo(); -const displayUserInfo = function (data) { //data points to json +const displayUserInfo = function (data) { const div = document.createElement("div"); div.classList.add("user-info"); div.innerHTML = ` @@ -35,11 +36,11 @@ const displayUserInfo = function (data) { //data points to json const getGitRepos = async function () { const fetchRepos = await fetch (`https://api.github.com/users/${username}/repos?sort=updated&per_page=100`); const repoData = await fetchRepos.json(); - //console.log(repoData); repoInfo(repoData); }; const repoInfo = function (repos) { + filterInput.classList.remove("hide"); for(const repo of repos) { const li = document.createElement("li"); li.classList.add("repo"); @@ -62,20 +63,20 @@ const getRepoInfo = async function (repoName) { const fetchLanguages = await fetch(repoInfo.languages_url); const languageData = await fetchLanguages.json(); - //console.log(languageData); + const languages = []; for(const language in languageData) { languages.push(language); - //console.log(languages); } displayRepoInfo(repoInfo, languages); }; const displayRepoInfo = function (repoInfo, languages) { + backToRepoBtn.classList.remove("hide"); repoData.innerHTML = ""; repoData.classList.remove("hide"); - repos.classList.add("hide"); + allReposContainer.classList.add("hide"); const div = document.createElement("div"); div.innerHTML = `

Name: ${repoInfo.name}

@@ -86,3 +87,27 @@ const displayRepoInfo = function (repoInfo, languages) { `; repoData.append(div); }; + +backToRepoBtn.addEventListener("click", function () { + allReposContainer.classList.remove("hide"); + repoData.classList.add("hide"); + backToRepoBtn.classList.add("hide"); +}); + + +filterInput.addEventListener("input", function (e) { + const searchText = e.target.value; + const repos = document.querySelectorAll(".repo"); + const searchTextLowercase = searchText.toLowerCase(); + + for (const repo of repos) { + const textLowercase = repo.innerText.toLowerCase(); + if (textLowercase.includes(searchTextLowercase)) { + repo.classList.remove("hide"); + } else { + repo.classList.add("hide"); + } + } +}); + +