From 24252e037cfd7faebe1f9e7d6920fb0533b55b89 Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Tue, 28 Sep 2021 23:12:41 +0200 Subject: [PATCH 1/8] initial commit --- code/index.html | 7 ++++++- code/script.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b0579269 100644 --- a/code/index.html +++ b/code/index.html @@ -6,6 +6,8 @@ Project GitHub Tracker + +

GitHub Tracker

@@ -13,7 +15,10 @@

Projects:

- +
+ +
+ diff --git a/code/script.js b/code/script.js index e69de29b..c761aab3 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,33 @@ +const USER = 'jenquach' +const repoNames = ['project-business-site', 'project-chatbot'] +const REPOS_URL = `https://api.github.com/users/${USER}/repos` + +const projectsContainer = document.getElementById('projects') + + +const getRepos = () => { + fetch(REPOS_URL) + .then(res => res.json()) + .then(data => { + console.log(data) + // data.forEach(repo => console.log(repo.name) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + forkedRepos.forEach(repo => projectsContainer.innerHTML += `

${repo.name}

`) + drawChart(forkedRepos.length) + }) +} + + +const getPRs = (repoNames) => { + repoNames.forEach(name => { + fetch(`https://api.github.com/repos/Technigo/${name}/pulls`) + .then(res => res.json()) + .then(data => { + console.log(data) + }) + }) +} + + +getRepos() +getPRs() \ No newline at end of file From 9ee2600e0d3c5b42646188c2f82ac53fdd2de919 Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Tue, 28 Sep 2021 23:53:21 +0200 Subject: [PATCH 2/8] added a donutchart and getPRs function is done --- code/chart.js | 31 +++++++++++++++++++++++++++++++ code/index.html | 14 ++++++++++++-- code/script.js | 18 +++++++++++++++--- 3 files changed, 58 insertions(+), 5 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..d16cad06 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,34 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +console.log('chart is here') + + + +const drawChart = () => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects left', + ], + datasets: [{ + label: 'My First Dataset', + data: [5, 20-5], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)' + ], + hoverOffset: 4 + }], + }, + }; + +const myChart = new Chart(ctx, config) +} + // These labels appear in the legend and in the tooltips when hovering different arcs + + + \ No newline at end of file diff --git a/code/index.html b/code/index.html index b0579269..5eac3807 100644 --- a/code/index.html +++ b/code/index.html @@ -11,8 +11,18 @@

GitHub Tracker

-

Projects:

-
+
+
+
+

Projects:

+
+
+

Pull Requests:

+
+
+
+
+
diff --git a/code/script.js b/code/script.js index c761aab3..1e0e5c82 100644 --- a/code/script.js +++ b/code/script.js @@ -1,8 +1,10 @@ const USER = 'jenquach' -const repoNames = ['project-business-site', 'project-chatbot'] +const repoNames = ['project-news-site', 'project-business-site', 'project-chatbot', 'project-guess-who', 'project-weather-app', 'project-github-tracker'] +const commitsURL = ['https://api.github.com/repos/Technigo/project-news-site/pulls/242/commits', 'https://api.github.com/repos/Technigo/project-business-site/pulls/222/commits'] const REPOS_URL = `https://api.github.com/users/${USER}/repos` const projectsContainer = document.getElementById('projects') +const pullRequests = document.getElementById('pullrequests') const getRepos = () => { @@ -18,16 +20,26 @@ const getRepos = () => { } -const getPRs = (repoNames) => { +const getPRs = () => { repoNames.forEach(name => { fetch(`https://api.github.com/repos/Technigo/${name}/pulls`) .then(res => res.json()) .then(data => { - console.log(data) + for (let i=0; i${data[i].title}` + } + } }) }) } +const getCommits = () => { + +} + getRepos() getPRs() \ No newline at end of file From 16ca877195b8dde7dbf396565687b2ab4da4b62b Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Thu, 30 Sep 2021 23:09:39 +0200 Subject: [PATCH 3/8] updated function getPullRequests --- code/index.html | 17 +++++----- code/script.js | 84 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 62 insertions(+), 39 deletions(-) diff --git a/code/index.html b/code/index.html index 5eac3807..150bb7bf 100644 --- a/code/index.html +++ b/code/index.html @@ -11,25 +11,22 @@

GitHub Tracker

-
-
-
-

Projects:

+
+
-
- -
- - + + diff --git a/code/script.js b/code/script.js index 1e0e5c82..88342d9c 100644 --- a/code/script.js +++ b/code/script.js @@ -1,45 +1,71 @@ const USER = 'jenquach' -const repoNames = ['project-news-site', 'project-business-site', 'project-chatbot', 'project-guess-who', 'project-weather-app', 'project-github-tracker'] -const commitsURL = ['https://api.github.com/repos/Technigo/project-news-site/pulls/242/commits', 'https://api.github.com/repos/Technigo/project-business-site/pulls/222/commits'] const REPOS_URL = `https://api.github.com/users/${USER}/repos` +// const repoNames = [ +// 'project-news-site', +// 'project-business-site', +// 'project-chatbot', +// 'project-guess-who', +// 'project-weather-app', +// ] + +// const commitsURL = [ +// 'https://api.github.com/repos/Technigo/project-news-site/pulls/242/commits', +// 'https://api.github.com/repos/Technigo/project-business-site/pulls/222/commits', +// 'https://api.github.com/repos/Technigo/project-chatbot/pulls/65/commits', +// 'https://api.github.com/repos/Technigo/project-guess-who/pulls/120/commits', +// ] + + const projectsContainer = document.getElementById('projects') const pullRequests = document.getElementById('pullrequests') -const getRepos = () => { +const getRepositories = () => { fetch(REPOS_URL) - .then(res => res.json()) - .then(data => { - console.log(data) - // data.forEach(repo => console.log(repo.name) - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - forkedRepos.forEach(repo => projectsContainer.innerHTML += `

${repo.name}

`) - drawChart(forkedRepos.length) - }) -} - - -const getPRs = () => { - repoNames.forEach(name => { - fetch(`https://api.github.com/repos/Technigo/${name}/pulls`) .then(res => res.json()) .then(data => { - for (let i=0; i${data[i].title}` - } - } + const technigoRepositories = data.filter( + repo => repo.fork && repo.name.includes('project-') + ) + console.log(technigoRepositories) + + technigoRepositories.forEach(repo => { + projectsContainer.innerHTML += ` +
+ ${repo.name} with default branch ${repo.default_branch} +

Recent push: ${new Date(repo.pushed_at).toDateString()}

+

Amounts of commit:

+
+ ` + }) + drawChart(technigoRepositories.length) + getPullRequests(technigoRepositories) }) +} + + +const getPullRequests = (allRepositories) => { + allRepositories.forEach(repo => { + const myRepoName = repo.name + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + fetch(PULL_URL) + .then(res => res.json()) + .then(data => { //data is the array of all pull requests + const myPullRequest = data.find( + pull => pull.user.login === repo.owner.login + ) + getCommits(myPullRequest.commits_url, myRepoName) + }) }) } -const getCommits = () => { - +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then(res => res.json()) + .then(data => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) } - -getRepos() -getPRs() \ No newline at end of file +getRepositories() From 54f817f287c25e75816973d0230a52c818787fa9 Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Sat, 2 Oct 2021 21:54:32 +0200 Subject: [PATCH 4/8] adding js functionality and mobile styling --- code/index.html | 28 ++++++++++---------- code/script.js | 68 +++++++++++++++++++++++++++++-------------------- code/style.css | 67 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 119 insertions(+), 44 deletions(-) diff --git a/code/index.html b/code/index.html index 150bb7bf..a69b5231 100644 --- a/code/index.html +++ b/code/index.html @@ -10,23 +10,21 @@ -

GitHub Tracker

-
- -
+
+ +
- - - +
+ +
+ +
+ +
+ diff --git a/code/script.js b/code/script.js index 88342d9c..fe45c96b 100644 --- a/code/script.js +++ b/code/script.js @@ -1,25 +1,29 @@ const USER = 'jenquach' +const USER_URL = `https://api.github.com/users/${USER}` const REPOS_URL = `https://api.github.com/users/${USER}/repos` -// const repoNames = [ -// 'project-news-site', -// 'project-business-site', -// 'project-chatbot', -// 'project-guess-who', -// 'project-weather-app', -// ] - -// const commitsURL = [ -// 'https://api.github.com/repos/Technigo/project-news-site/pulls/242/commits', -// 'https://api.github.com/repos/Technigo/project-business-site/pulls/222/commits', -// 'https://api.github.com/repos/Technigo/project-chatbot/pulls/65/commits', -// 'https://api.github.com/repos/Technigo/project-guess-who/pulls/120/commits', -// ] - - +const headerContainer = document.getElementById('topnav') +const profileContainer = document.getElementById('user-info') const projectsContainer = document.getElementById('projects') const pullRequests = document.getElementById('pullrequests') +// function to fetch the user data from GitHub API +const userProfile = () => { + fetch(USER_URL) + .then(res => res.json()) + .then(data => { + profileContainer.innerHTML = ` +
+ +
+

${data.name}

+ ${data.login} +

${data.location}

+
+ ` + }) +} const getRepositories = () => { fetch(REPOS_URL) @@ -28,22 +32,21 @@ const getRepositories = () => { const technigoRepositories = data.filter( repo => repo.fork && repo.name.includes('project-') ) - console.log(technigoRepositories) - technigoRepositories.forEach(repo => { projectsContainer.innerHTML += ` -
- ${repo.name} with default branch ${repo.default_branch} -

Recent push: ${new Date(repo.pushed_at).toDateString()}

-

Amounts of commit:

+
+ ${repo.name} +

Recent push ${new Date(repo.pushed_at).toDateString()}

+

Commits

+

Branch ${repo.default_branch}

` }) + // Draw chart with technigoRepositories data drawChart(technigoRepositories.length) getPullRequests(technigoRepositories) }) } - const getPullRequests = (allRepositories) => { allRepositories.forEach(repo => { @@ -52,10 +55,18 @@ const getPullRequests = (allRepositories) => { fetch(PULL_URL) .then(res => res.json()) .then(data => { //data is the array of all pull requests + // Detect if we have pull request or not. const myPullRequest = data.find( pull => pull.user.login === repo.owner.login - ) - getCommits(myPullRequest.commits_url, myRepoName) + ) + // If yes - call fetchCommits function + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name); + // If no - commits 0 is shown. + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'Commits 0'; + } }) }) } @@ -64,8 +75,9 @@ const getCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) .then(res => res.json()) .then(data => { - document.getElementById(`commit-${myRepoName}`).innerHTML += data.length - }) + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) } -getRepositories() +userProfile() +getRepositories() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..76da805d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,68 @@ body { - background: #FFECE9; + background: #eee1dd; +} + +.topnav{ + width: 100%; + height: 100%; + background-color: aliceblue; + border: 2px solid black; +} + +h1 { + font-size: 40px; + text-align: center; +} + +.user-info { + margin-bottom: 50px; +} + +.picture { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.user-picture { + width: 300px; + border-radius: 50%; + border: 2px solid black; + border-color: #9fd6f0; + object-fit: cover; + margin: 20px 0px; +} + +.user-information { + text-align: center; + border: 2px solid black; +} + +.projects { + display: grid; + justify-content: center; + width: 100%; +} + +.project { + display: grid; + border: 2px solid black; + padding: 10px; + border-radius: 10px; + text-align: center; + height: 200px; + width: 420px; + margin-top: 20px; +} + +p { + font-size: 18px; +} +.chart-container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 30px; + text-align: center; } \ No newline at end of file From ff3b8597dafcb0bad894676d83549bac3c0efa4d Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Sat, 2 Oct 2021 23:30:59 +0200 Subject: [PATCH 5/8] updated styling for mobile --- code/chart.js | 4 +-- code/index.html | 10 ++++-- code/script.js | 19 ++++++---- code/style.css | 95 ++++++++++++++++++++++++++++++++++++++++++------- 4 files changed, 104 insertions(+), 24 deletions(-) diff --git a/code/chart.js b/code/chart.js index d16cad06..07cb1a01 100644 --- a/code/chart.js +++ b/code/chart.js @@ -19,8 +19,8 @@ const drawChart = () => { label: 'My First Dataset', data: [5, 20-5], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(54, 162, 235)' + 'rgb(42, 78, 98)', + 'rgb(160,168,175)' ], hoverOffset: 4 }], diff --git a/code/index.html b/code/index.html index a69b5231..93607a04 100644 --- a/code/index.html +++ b/code/index.html @@ -7,22 +7,26 @@ Project GitHub Tracker - +
-
+
+

repositories

+
+
+
diff --git a/code/script.js b/code/script.js index fe45c96b..63a80806 100644 --- a/code/script.js +++ b/code/script.js @@ -18,8 +18,8 @@ const userProfile = () => {

${data.name}

- ${data.login} -

${data.location}

+ ${data.login} +

${data.location}

` }) @@ -35,13 +35,18 @@ const getRepositories = () => { technigoRepositories.forEach(repo => { projectsContainer.innerHTML += `
- ${repo.name} -

Recent push ${new Date(repo.pushed_at).toDateString()}

-

Commits

-

Branch ${repo.default_branch}

+
+ ${repo.name} +

Recent push ${new Date(repo.pushed_at).toDateString()}

+
+
+

${repo.default_branch}

+

+
` }) + // // Draw chart with technigoRepositories data drawChart(technigoRepositories.length) getPullRequests(technigoRepositories) @@ -65,7 +70,7 @@ const getPullRequests = (allRepositories) => { // If no - commits 0 is shown. } else { document.getElementById(`commit-${repo.name}`).innerHTML = - 'Commits 0'; + ' 0'; } }) }) diff --git a/code/style.css b/code/style.css index 76da805d..ebd9e461 100644 --- a/code/style.css +++ b/code/style.css @@ -1,12 +1,21 @@ +:root { + --bg-color: rgb(13,17,23); + --primary-color: rgb(160,168,175); +} + body { - background: #eee1dd; + font-family: Helvetica,Arial; + margin: 0; + padding: 0; + background-color: rgb(13,17,23); } .topnav{ width: 100%; height: 100%; - background-color: aliceblue; - border: 2px solid black; + background-color: rgb(22,27,34); + border: 2px solid transparent; + color: var(--primary-color); } h1 { @@ -15,7 +24,7 @@ h1 { } .user-info { - margin-bottom: 50px; + margin: 40px 0; } .picture { @@ -26,7 +35,7 @@ h1 { } .user-picture { - width: 300px; + width: 250px; border-radius: 50%; border: 2px solid black; border-color: #9fd6f0; @@ -35,23 +44,38 @@ h1 { } .user-information { - text-align: center; - border: 2px solid black; + color: var(--primary-color); +} + +.user-information a { + text-decoration: none; + color: rgb(42, 78, 98); + font-weight: bold; + font-size: 20px; + text-align: left; } .projects { display: grid; justify-content: center; - width: 100%; +} + +.repo-title { + font-size: 25px; + font-weight: 400; + color: rgb(160,168,175); + margin: 0; + padding-left: 12px; } .project { - display: grid; - border: 2px solid black; + display: flex; + justify-content: space-between; + border: 2px solid grey; + color: grey; padding: 10px; border-radius: 10px; - text-align: center; - height: 200px; + height: 100px; width: 420px; margin-top: 20px; } @@ -65,4 +89,51 @@ p { align-items: center; margin-top: 30px; text-align: center; +} + +.project a { + text-decoration: none; + color: rgb(42, 78, 98); + font-weight: bold; + font-size: 20px; + text-align: left; + margin-top: 10px; + margin-left: 10px; +} + +#branch { + border: 1px solid black; + border-radius: 25px; + margin-top: 10px; + padding: 6px; + margin-right: 10px; + line-height: 12px; + border-color: grey; +} + +.repo-info { + margin-top: 10px; +} + +.repo-details { + display: flex; + justify-content: flex-end; + align-items: baseline; +} + +.push { + font-style: italic; + text-align: left; + font-size: 16px; + margin-top: 10px; + margin-left: 10px; +} + +.chartdiv { + width: 400px; + margin: 40px 0; +} + +@media only screen and (min-width: 950px) { + } \ No newline at end of file From 8e836e42faf1432b1873d0ebc9c03cf9ea8a5037 Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Sun, 3 Oct 2021 00:52:59 +0200 Subject: [PATCH 6/8] added styling for desktop --- code/index.html | 18 +++++++++++------- code/style.css | 48 +++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/code/index.html b/code/index.html index 93607a04..6a006cc0 100644 --- a/code/index.html +++ b/code/index.html @@ -15,14 +15,18 @@

GitHub Tracker

- -
- -
-

repositories

-
- + +
+ +
+
+

repositories

+
+ + +
+
diff --git a/code/style.css b/code/style.css index ebd9e461..13ba3080 100644 --- a/code/style.css +++ b/code/style.css @@ -7,7 +7,7 @@ body { font-family: Helvetica,Arial; margin: 0; padding: 0; - background-color: rgb(13,17,23); + background-color: var(--bg-color); } .topnav{ @@ -37,9 +37,6 @@ h1 { .user-picture { width: 250px; border-radius: 50%; - border: 2px solid black; - border-color: #9fd6f0; - object-fit: cover; margin: 20px 0px; } @@ -63,7 +60,7 @@ h1 { .repo-title { font-size: 25px; font-weight: 400; - color: rgb(160,168,175); + color: var(--primary-color); margin: 0; padding-left: 12px; } @@ -71,8 +68,8 @@ h1 { .project { display: flex; justify-content: space-between; - border: 2px solid grey; - color: grey; + border: 1px solid rgb(156, 155, 155); + color: var(--primary-color); padding: 10px; border-radius: 10px; height: 100px; @@ -134,6 +131,39 @@ p { margin: 40px 0; } -@media only screen and (min-width: 950px) { - +.line { + display: none; +} + +@media only screen and (min-width: 1200px) { + .wrapper { + display: flex; + justify-content: space-around; + } + + .projects { + grid-template-columns: auto auto; + grid-column-gap: 20px; + } + + .repo-title { + padding-top: 55px; + } + + .projects :first-child { + grid-column: 1 / -1; + } + + .chartdiv { + margin: 0 + } + + .line { + display: block; + width: 90%; + height: 0.2px; + color: var(--primary-color); + margin: 80px auto; + text-align: right; + } } \ No newline at end of file From 53cabd283ede0e0f6532fc28e9880cc8bdbeb249 Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Sun, 3 Oct 2021 23:21:46 +0200 Subject: [PATCH 7/8] added styling and progress bar for languages --- code/chart.js | 6 +----- code/index.html | 3 ++- code/script.js | 47 ++++++++++++++++++++++++++++++++++++++++++----- code/style.css | 34 ++++++++++++++++++++++++++++++++-- 4 files changed, 77 insertions(+), 13 deletions(-) diff --git a/code/chart.js b/code/chart.js index 07cb1a01..75076592 100644 --- a/code/chart.js +++ b/code/chart.js @@ -3,10 +3,6 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 -console.log('chart is here') - - - const drawChart = () => { const config = { type: 'doughnut', @@ -19,7 +15,7 @@ const drawChart = () => { label: 'My First Dataset', data: [5, 20-5], backgroundColor: [ - 'rgb(42, 78, 98)', + '#3dabcc', 'rgb(160,168,175)' ], hoverOffset: 4 diff --git a/code/index.html b/code/index.html index 6a006cc0..3a1b310a 100644 --- a/code/index.html +++ b/code/index.html @@ -24,7 +24,7 @@

GitHub Tracker

repositories

- +
@@ -33,6 +33,7 @@

repositories

+ diff --git a/code/script.js b/code/script.js index 63a80806..6740d009 100644 --- a/code/script.js +++ b/code/script.js @@ -1,3 +1,12 @@ +// //GLOBAL VARIABLES +// const options = { +// method: 'GET', +// headers: { +// Authorization: `token ****`, +// }, +// }; + + const USER = 'jenquach' const USER_URL = `https://api.github.com/users/${USER}` const REPOS_URL = `https://api.github.com/users/${USER}/repos` @@ -24,11 +33,12 @@ const userProfile = () => { ` }) } - +// function to fetch the technigo repositories const getRepositories = () => { fetch(REPOS_URL) .then(res => res.json()) .then(data => { + // filtering the technigo repositories const technigoRepositories = data.filter( repo => repo.fork && repo.name.includes('project-') ) @@ -37,7 +47,8 @@ const getRepositories = () => {
${repo.name} -

Recent push ${new Date(repo.pushed_at).toDateString()}

+

Recent push ${new Date(repo.pushed_at).toLocaleString("sv-SE", {dateStyle: 'short'})}

+

${repo.default_branch}

@@ -45,14 +56,15 @@ const getRepositories = () => {
` + getLanguages(repo) }) - // // Draw chart with technigoRepositories data drawChart(technigoRepositories.length) getPullRequests(technigoRepositories) }) } +// function to fetch all pull requests const getPullRequests = (allRepositories) => { allRepositories.forEach(repo => { const myRepoName = repo.name @@ -76,13 +88,38 @@ const getPullRequests = (allRepositories) => { }) } +// function to fetch number of commits const getCommits = (myCommitsUrl, myRepoName) => { - fetch(myCommitsUrl) + fetch(myCommitsUrl, ) .then(res => res.json()) .then(data => { document.getElementById(`commit-${myRepoName}`).innerHTML += data.length }) } +// function to fetch all the languages used in the repository +const getLanguages = (repo) => { + const languages_URL = `https://api.github.com/repos/${USER}/${repo.name}/languages` + fetch(languages_URL, ) + .then(res => res.json()) + .then(data => { + const html = data.HTML || 0; + const css = data.CSS || 0; + const js = data.JavaScript || 0; + const sum = html + css + js; + // calculates the percentage used of each language + const htmlPercentage = ((html / sum) * 100).toFixed(1); + const cssPercentage = ((css / sum) * 100).toFixed(1); + const jsPercentage = ((js / sum) * 100).toFixed(1); + + document.getElementById(`language-${repo.name}`).innerHTML = ` +
+
+
+ ` + }) +} + + userProfile() -getRepositories() \ No newline at end of file +getRepositories() diff --git a/code/style.css b/code/style.css index 13ba3080..1a3d886c 100644 --- a/code/style.css +++ b/code/style.css @@ -72,7 +72,7 @@ h1 { color: var(--primary-color); padding: 10px; border-radius: 10px; - height: 100px; + width: 420px; margin-top: 20px; } @@ -98,6 +98,11 @@ p { margin-left: 10px; } +.language { + margin: 0; + margin-left: 10px; + padding: 5px o; +} #branch { border: 1px solid black; border-radius: 25px; @@ -126,6 +131,30 @@ p { margin-left: 10px; } +.progress { + display: flex; + width: 100%; + margin-left: 10px; + padding-bottom: 10px; +} + +.language-html { + height: 10px; + border-radius: 5px 0 0 5px; + background-color: #4a24f1; +} + +.language-css { + height: 10px; + background-color: #71ce71; +} + +.language-js { + height: 10px; + border-radius: 0 5px 5px 0; + background-color: #3dabcc; +} + .chartdiv { width: 400px; margin: 40px 0; @@ -143,7 +172,8 @@ p { .projects { grid-template-columns: auto auto; - grid-column-gap: 20px; + grid-column-gap: 20px; + } .repo-title { From f71b9f6ac5d620c615b1ad6c5167c2442f1d04b0 Mon Sep 17 00:00:00 2001 From: Jenny Quach Date: Sun, 3 Oct 2021 23:54:16 +0200 Subject: [PATCH 8/8] updated readme --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..497cebff 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # GitHub Tracker - -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This weeks assignment is to create a tracker for technigo repositories fetched from GitHub API. ## The problem +This week I have googled so much and stack overflow has really helped me alot with my problems. Lectures helped as well where I learnt about the github token and how to set commits to 0. -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +If I had more time I would change the tooltip to instead have the name of the languages written out at the top of the projects to the right and I would add a search bar for projects. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +Netlify: https://week7-githubtracker-jenquach.netlify.app (