From 87b829fc2df1cafa112f5c8e0259eff62d18946d Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Wed, 23 Feb 2022 23:41:04 +0100 Subject: [PATCH 01/10] update information --- .gitignore | 1 + README.md | 42 +++++++- chart.js | 75 +++++++++++++ code/chart.js | 4 - code/index.html | 21 ---- code/script.js | 0 code/style.css | 3 - img/favicon.png | Bin 0 -> 1890 bytes index.html | 43 ++++++++ script.js | 116 ++++++++++++++++++++ style.css | 280 ++++++++++++++++++++++++++++++++++++++++++++++++ 11 files changed, 553 insertions(+), 32 deletions(-) create mode 100644 .gitignore create mode 100644 chart.js delete mode 100644 code/chart.js delete mode 100644 code/index.html delete mode 100644 code/script.js delete mode 100644 code/style.css create mode 100644 img/favicon.png create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..1c453411 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +token.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..70a44ba3 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,46 @@ # GitHub Tracker -Replace this readme with your own information about your project. +### What to include -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +- A list of all repos that are forked ones from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commit messages for each repo +- All pull requests +- A chart of how many projects you've done so far, compared to how many you will do using [Chart.js](https://www.chartjs.org/). [Here](https://www.chartjs.org/docs/latest/getting-started/)'s documentation on how to get started, and in the left menu you can also find [example usage](https://www.chartjs.org/docs/latest/getting-started/usage.html). -## The problem +## Requirements ๐Ÿงช -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? +Your project should fulfil the three **๐Ÿ”ต Blue Level Requirements** , **๐Ÿ”ด Red Level** and **โšซ Black Level Requirements** to push your knowledge to the next level! + +### **๐Ÿ”ต Blue Level (Minimum Requirements)** + +Your page should include: + +- A list of all repos that are forked from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commits for each repo +- It should be responsive (mobile first) +- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects ๐Ÿฅณ). + +### **๐Ÿ”ด Red Level (Intermediary Goals)** + +- Sort your list in different ways. +**Example of what you can sort by:** creation date, name, most commits, followers or stargazers +- Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos +- Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion? +- Display the comments you got from each pull request +- When you're browsing through the repo object, you'll see that there's a lot of data that we can use. Create a chart over some of the data. +**Example of data to use:** Repo size, people that starred your repo (stargazers) or amount of commits on each repo. + +### **โšซ Black Level (Advanced Goals)** + +- Implement a search field to find a specific repo based on name ## View it live diff --git a/chart.js b/chart.js new file mode 100644 index 00000000..426e7093 --- /dev/null +++ b/chart.js @@ -0,0 +1,75 @@ +//DOM-selector for the canvas ๐Ÿ‘‡ +const ctx = document.getElementById('chart').getContext('2d') + +//"Draw" the chart here ๐Ÿ‘‡ +/* +const labels = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['rgb(255, 99, 132)','green'], + borderColor: 'rgb(255, 99, 132)', + data: [0, 10, 5, 2, 20, 30, 45], + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: {} + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); + + */ + + +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects left', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 20 - amount], + backgroundColor: [ + '#a07a99', + '#a7c0b8', + ], + + + hoverOffset: 4 + }] + }, + options: { + layout: { + padding: 25 + }, + plugins: { + legend: { + labels: { + font: { + size: 15 + } + } + } + } + } + }; + const myChart = new Chart(ctx, config); +} diff --git a/code/chart.js b/code/chart.js deleted file mode 100644 index 92e85a30..00000000 --- a/code/chart.js +++ /dev/null @@ -1,4 +0,0 @@ -//DOM-selector for the canvas ๐Ÿ‘‡ -const ctx = document.getElementById('chart').getContext('2d') - -//"Draw" the chart here ๐Ÿ‘‡ diff --git a/code/index.html b/code/index.html deleted file mode 100644 index 2fb5e0ae..00000000 --- a/code/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - - \ No newline at end of file diff --git a/code/script.js b/code/script.js deleted file mode 100644 index e69de29b..00000000 diff --git a/code/style.css b/code/style.css deleted file mode 100644 index 7c8ad447..00000000 --- a/code/style.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: #FFECE9; -} \ No newline at end of file diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..1176e028b2aa46e527b8d92fd26a75d88d87cacb GIT binary patch literal 1890 zcmV-o2c7tdP)Px+97#k$R9HvNmw#|n)fLA-=j{@969OSA39%s?V3!|B`4N-o(6IzNj#|*sLd)PF z!nCy(7$^vop;ZSEkOD;ti2=3kKo!NYh^;!cND-`B1j@>M}X#n z0as9xK}~nKK1GgKIUDF3y9T1}_kpZ7Al2PsCXADbUw0s@R}Sdq=@H!}NP${bsrRcd z)gU|(^Is(6i&tt^meHIsyYLWqk1>dpul{y-ATDI>229@M|sDCvGuAETi?erG|wvT~~kb8K`~wcvg$c zmECZ9N}}6sosM1KzXec-(6f`^VDTeewKpH(u}*!INlh20^ipI~+x2vkfj0+#FL`W_ z_iGfx6~z@2{CabM)q5WW3OWbSRpASdq#!Nnk9P&n@5}tlV{Zhu^`t&+e!>e+dI`CP zxlT0S6u^M#=Fj&o0n$4KKwb%7n9>`#w=;k@kEOl(;O4x`-KD8vwP(eGG^v#;D=jPp z^lj8>JIB7^+Bez|bt$4BnS~$p)cTT3#dFF)5=c({s}$e21u-lvu~4<$EYOSL3saYa zjBXF`-JQWoMd#aNr!ITXo~TURm_)dCiD&JWCb}6J#--+)wjsx>8nq}8D^xYrlDV#f z5qH6_GjZHnbEL zy7rf^X&q}=?;B?rymf;N{FDlL=E5xniG4Eb>TDqrM~FIDJSEgZf4+(wuw|mnU9m)1 zC@~0KoSP6zYbX~XyR{2CT)`qLB#shx0l*1Z6nI5p(zWhtie=@?!Ba=<@lZ+jRFL0* zU7A+ue-~g>R;ot5JM2b@b-F3a({iA~ZqZnIAmI|Bj#IU}S&0kP-|~BjQ~n z$B#$aHptCQz#DnMG8ky6@n<=3@{@Sl&{Wp%Yi3k>C9XRQLXqPmd`!9Q(=oWMt2r}K z#1yRSY9L;~|K-^K7r@oBjC7+Z!520fK1-WjZGW>{?)KexlL&cQbRc3i%EUWuU1*(k zGms%D5l&G7V#UjtKAV%$m|zAH&E_*Q`-`epA14F47$cmPy&RDrh=5-5)N)Z5*Pq29mr%d9eRV3|@_`iMzQ|TN|=>B664G zr%d+FI=eOUTy}wJ$$m$gloPge)+x@LP(}3}glJV`YD%zbc%h}(Z}+_q-0}SdSR5uN z6U=B(9vb>Q!gDAlFpFkviN4mlQ5~9*vs=&+AZB-u`eeqr8U+deBHR9G*@v!f2cTws zLu2ng3ol*8ucHt?ibdR|+fL7;w>QW?t0291P{wAJBD@egS=_!yxHp;-SZu&36)YnZ z=_5y40Q5Hh8I*oNUDp8CeLR<_d6+;J)Q5sHd8pk1f4D*2K$H>IR|Y)=OtAd~CdmHs z?RvXES4}yBV2JYft^w>gGaqllA^uSXIem}Gof%_sar&C~!L>B?ghxV38l>-Rkld`eypT&zASx91MSulo@SJITU!%4I^NC@|6ue``s=^=4sB z>KeeWkIf@3DM)244D|&iBQ>9a`UnP_$$N;8#Z< z2lG<~+yYB&+Kimi%Y?pG8TspvY8QBLoxE|7y2 cf3h9^1#)!j`_My>#Q*>R07*qoM6N<$g5JrD^8f$< literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 00000000..da88bd49 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + Eyahya's GitHub Tracker + + + + + + + + + + +
+

GitHub Tracker

+
+
+ + +
+
+
+ +
+
+ + +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..e97c0e93 --- /dev/null +++ b/script.js @@ -0,0 +1,116 @@ +const USER = 'eyahya-khan' +const userContainer = document.getElementById('myProfile') +const searchField = document.getElementById('search-field') +const searchForm = document.getElementById('search-form') +const REPOS_URL = `https://api.github.com/users/${USER}/repos?per_page=100` +const USER_URL = `https://api.github.com/users/${USER}` +const projectsContainer = document.getElementById('projects') +const ldsripple = document.getElementById('loading') + +const Auth = { + method: 'GET', + headers: { + Authorization: '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' // you need to paste your token over here. + } +} + +let repos; + +//profile image and info +const userProfile = () => { + fetch(USER_URL, Auth) + .then(res => res.json()) + .then(data => { + //console.log(data) + + userContainer.innerHTML = ` +
+

${data.name}

+ @${data.login} +

${data.location}

+
+
+ ` + }) +} + +userProfile() + +const getRepos = () => { + fetch(REPOS_URL, Auth) + .then(response => response.json()) + .then(data => { + + //console.log(data) + + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + + //console.log(forkedRepos.length) + + + getPullRequests(forkedRepos) + drawChart(forkedRepos.length) + }) + +} +getRepos() + +//function to get the repos +const getPullRequests = (repos) => { + + //console.log(repos) + + projectsContainer.innerHTML = ''; + repos.forEach(repo => { + console.log(repo.name) + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, Auth) + .then(res => res.json()) + .then(data => { + + //console.log(data) + + const myPullRequest = data.filter((pull) => { + + //console.log('pull-'+ pull.user.login.startsWith('eyahya')) + //console.log('repo-'+ repo.owner.login) + return pull.user.login === repo.owner.login + }) + console.log('hello:' + myPullRequest[0].commits_url) + + if (myPullRequest.length === 0) { + return + } + getCommits(myPullRequest[0].commits_url, (data) => { + + //added function so the DOM do not self close tags + let boxHtml = `
`; + boxHtml += `

${repo.name}

` + boxHtml += `

Number of commits: ${data.length}

` + boxHtml += `

Last update: ${new Date(repo.pushed_at).toDateString()}

` + boxHtml += `

Default branch: ${repo.default_branch}

` + boxHtml += `

Go to repo

` + boxHtml += '
' + projectsContainer.innerHTML += boxHtml; //closing the div tag + ldsripple.style.display = 'none' //loading icon + }) + }) + }) +} + +//get my commits +const getCommits = (url, callbackFunction) => { + fetch(url, Auth) + .then(res => res.json()) + .then(data => { + callbackFunction(data) + }) +} + +//eventlistener on form-submit +searchForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // this function filters your repos where name contains searchField.value. Where IndexOf returns the position of substring and -1 = doesn't exist in string + const found = repos.filter(repo => repo.name.indexOf(searchField.value) > -1); + getPullRequests(found); +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..2c3451fa --- /dev/null +++ b/style.css @@ -0,0 +1,280 @@ +body { + background-color: #f0f0f0; + margin: 0; + padding: 0; + font-family: 'Barlow', sans-serif; +} + +/*header*/ +.header { + background-color: #7aa094; + display: grid; + grid-column: span 12; + justify-content: center; +} + +.header-text { + color: #fff; + display: grid; + grid-column: span 2/8; + font-weight: 300; + font-size: 25px; +} + +form#search-form { + grid-column: span 12; + margin-bottom: 10px; +} + +.icon_header { + padding: 10px 0px 10px 0px; + height: 50px; + display: inline; + display: grid; + grid-column: span 8/12; +} + +/*search field*/ +.search-container { + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; +} + +.input-field { + margin: 7px 0px 8px 0px; + grid-column: 1/12; + padding: 10px 20px; + border-radius: 15px; + font-size: 15px; + color: #7aa094; + border: 1px solid #7aa094; + font-family: 'Barlow', sans-serif; + font-weight: 500; +} + +.button-search { + margin: 7px 0px 7px 0px; + grid-column: 2/4; + padding: 10px 20px; + border-radius: 15px; + color: #fff; + background-color: #56786d; + font-size: 15px; + border: 1px solid #7aa094; + font-family: 'Barlow', sans-serif; + font-weight: 500; +} + +.button-search:hover { + color: #364b45; + background-color: #56786d; + font-weight: 500; +} + +/*main grid*/ +.main-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; + column-gap: 10px; + row-gap: 10px; +} + +/*profile*/ +.my-profile { + background-color: #f0f0f0; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; + border-radius: 25px 0px; + margin: 15px 0px 15px 0px; +} + +.profileinfo { + background-color: #f0f0f0; + grid-column: span 2/4; +} + +.profileinfo a { + color: black; + text-decoration: none; +} + +.profileimg { + grid-column: 6/12; +} + +.profileimg img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 25px 0px; +} + +/*repos*/ +.box-repo { + padding: 10px; + background-color: #7aa094; + display: grid; + grid-column: span 12; + border-radius: 25px 0px; +} + +.box-repo p { + text-align:center; + margin-block-start: 0em; + margin-block-end: 0.2em; + font-size: 15px; +} + +.box-repo h3 { + text-align:center; + margin-block-start: 0.2em; + margin-block-end: 0.3em; + font-size: 22px; +} + +.box-repo a { + text-align:center; + color: #fff; + text-decoration: none; + cursor: pointer; + font-size: 20px; +} + +/*chart*/ +.chart { + grid-column: span 12; + max-width: 100%; + max-height: 500px; + display: grid; +} + + +/*Loading icon*/ +.lds-ripple { + position: relative; + display: grid; + grid-column: 6/8; + width: 80px; + height: 80px; +} + +.lds-ripple div { + position: absolute; + border: 4px solid #7aa094; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +.lds-ripple div:nth-child(2) { + animation-delay: -0.5s; +} + +@keyframes lds-ripple { + 0% { + top: 36px; + left: 36px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0px; + left: 0px; + width: 72px; + height: 72px; + opacity: 0; + } +} + + +/* tablet */ +@media (min-width: 768px) { + .box-repo { + grid-column: span 6; + border-radius: 20px; + } + + .chart { + grid-column: 4/10; + } + + .my-profile { + grid-template-areas: ". info ." + ". image ."; + grid-template-columns: 4fr 4fr 4fr; + } + + .profileimg { + grid-area: image; + } + + .profileimg img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 20px; + } + + .profileinfo { + grid-column: span 5/11; + grid-area: info; + } + + .profileinfo h2 { + margin-block-start: 0.2em; + margin-block-end: 0.2em; + } + + .profileinfo p { + margin-block-start: 0.3em; + } + +} + +/* desktop */ +@media (min-width: 992px) { + + + .header { + background-color: #7aa094; + display: grid; + grid-column: span 12; + } + + .my-profile { + grid-template-areas: ". info image"; + grid-template-columns: 3fr 3fr 3fr 3fr; + } + + .profileinfo { + text-align: right; + padding-right: 10px; + } + + .profileimg { + grid-area: image; + } + + .profileimg img { + max-height: 200px; + + } + + .box-repo { + grid-column: span 4; + border-radius: 20px; + } + + .grid-container { + grid-column: 2/12; + } + +} \ No newline at end of file From 12ad506ab7a3184d236e1b27ab336b7492114cd6 Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Thu, 24 Feb 2022 10:01:33 +0100 Subject: [PATCH 02/10] update token --- .gitignore | 2 +- chart.js | 2 +- index.html | 1 + script.js | 10 ++++++---- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 1c453411..2c1117b2 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -token.js \ No newline at end of file +secret.js \ No newline at end of file diff --git a/chart.js b/chart.js index 426e7093..ea538ac5 100644 --- a/chart.js +++ b/chart.js @@ -46,7 +46,7 @@ const drawChart = (amount) => { ], datasets: [{ label: 'My First Dataset', - data: [amount, 20 - amount], + data: [amount, 19 - amount], backgroundColor: [ '#a07a99', '#a7c0b8', diff --git a/index.html b/index.html index da88bd49..b680fc4f 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,7 @@

GitHub Tracker

+ diff --git a/script.js b/script.js index e97c0e93..59922e71 100644 --- a/script.js +++ b/script.js @@ -10,7 +10,7 @@ const ldsripple = document.getElementById('loading') const Auth = { method: 'GET', headers: { - Authorization: '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' // you need to paste your token over here. + Authorization: `${API_TOKEN}` } } @@ -62,8 +62,8 @@ const getPullRequests = (repos) => { projectsContainer.innerHTML = ''; repos.forEach(repo => { - console.log(repo.name) - fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, Auth) + //console.log(repo.name) + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, Auth) .then(res => res.json()) .then(data => { @@ -75,11 +75,12 @@ const getPullRequests = (repos) => { //console.log('repo-'+ repo.owner.login) return pull.user.login === repo.owner.login }) - console.log('hello:' + myPullRequest[0].commits_url) + //console.log('hello:' + myPullRequest[0].commits_url) if (myPullRequest.length === 0) { return } + getCommits(myPullRequest[0].commits_url, (data) => { //added function so the DOM do not self close tags @@ -112,5 +113,6 @@ searchForm.addEventListener('submit', (e) => { // this function filters your repos where name contains searchField.value. Where IndexOf returns the position of substring and -1 = doesn't exist in string const found = repos.filter(repo => repo.name.indexOf(searchField.value) > -1); + getPullRequests(found); }) \ No newline at end of file From dbcde98126b871f2336bc00d31983605b47a1744 Mon Sep 17 00:00:00 2001 From: Eyahya Khan Date: Thu, 24 Feb 2022 10:53:32 +0100 Subject: [PATCH 03/10] Set theme jekyll-theme-cayman --- _config.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 _config.yml diff --git a/_config.yml b/_config.yml new file mode 100644 index 00000000..c4192631 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file From 142a1743f433f8b7cf636f4f1311d751ca1abcd9 Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Thu, 24 Feb 2022 17:03:45 +0100 Subject: [PATCH 04/10] added commit --- _config.yml | 1 - chart.js | 54 +++++++++++++++++++++++++++++++---------------------- script.js | 27 ++++++++++++++++++--------- 3 files changed, 50 insertions(+), 32 deletions(-) delete mode 100644 _config.yml diff --git a/_config.yml b/_config.yml deleted file mode 100644 index c4192631..00000000 --- a/_config.yml +++ /dev/null @@ -1 +0,0 @@ -theme: jekyll-theme-cayman \ No newline at end of file diff --git a/chart.js b/chart.js index ea538ac5..aa550027 100644 --- a/chart.js +++ b/chart.js @@ -2,47 +2,57 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here ๐Ÿ‘‡ -/* +const drawChart = (amount) => { const labels = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - ]; + 'Completed projects', + 'Projects to do', + ]; const data = { labels: labels, datasets: [{ label: 'My First dataset', - backgroundColor: ['rgb(255, 99, 132)','green'], - borderColor: 'rgb(255, 99, 132)', - data: [0, 10, 5, 2, 20, 30, 45], + backgroundColor: [ + '#a07a99', + '#a7c0b8', + ], + borderColor: '#000000', + data: [amount, 19 - amount], }] }; + const options = { + layout: { + padding: 25 + }, + plugins: { + legend: { + labels: { + font: { + size: 16 + } + } + } + } +} + const config = { type: 'doughnut', data: data, - options: {} + options: options }; - const myChart = new Chart( - document.getElementById('chart'), - config - ); - - */ + const myChart = new Chart(ctx, config); +} - + /* const drawChart = (amount) => { const config = { type: 'doughnut', data: { labels: [ - 'Finished projects', - 'Projects left', + 'Completed projects', + 'Projects to do', ], datasets: [{ label: 'My First Dataset', @@ -52,7 +62,6 @@ const drawChart = (amount) => { '#a7c0b8', ], - hoverOffset: 4 }] }, @@ -73,3 +82,4 @@ const drawChart = (amount) => { }; const myChart = new Chart(ctx, config); } +*/ \ No newline at end of file diff --git a/script.js b/script.js index 59922e71..341528f7 100644 --- a/script.js +++ b/script.js @@ -45,7 +45,7 @@ const getRepos = () => { const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - //console.log(forkedRepos.length) + //console.log(forkedRepos) getPullRequests(forkedRepos) @@ -63,37 +63,43 @@ const getPullRequests = (repos) => { projectsContainer.innerHTML = ''; repos.forEach(repo => { //console.log(repo.name) + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, Auth) .then(res => res.json()) .then(data => { - //console.log(data) + console.log(data) + console.log(data[0].base.user.followers_url) const myPullRequest = data.filter((pull) => { //console.log('pull-'+ pull.user.login.startsWith('eyahya')) - //console.log('repo-'+ repo.owner.login) + //console.log('repo-'+ repo.owner.login.startsWith('eyahya')) return pull.user.login === repo.owner.login }) - //console.log('hello:' + myPullRequest[0].commits_url) - + //console.log('hello:' + myPullRequest.length) +/* if (myPullRequest.length === 0) { return - } + }*/ - getCommits(myPullRequest[0].commits_url, (data) => { - + const commitUrl = myPullRequest[0].commits_url + //display commits info + const displayInfo = (data) => { + //console.log(data) //added function so the DOM do not self close tags let boxHtml = `
`; boxHtml += `

${repo.name}

` boxHtml += `

Number of commits: ${data.length}

` + boxHtml += `

Created at: ${new Date(repo.created_at).toDateString()}

` boxHtml += `

Last update: ${new Date(repo.pushed_at).toDateString()}

` boxHtml += `

Default branch: ${repo.default_branch}

` boxHtml += `

Go to repo

` boxHtml += '
' projectsContainer.innerHTML += boxHtml; //closing the div tag ldsripple.style.display = 'none' //loading icon - }) + } + getCommits(commitUrl, displayInfo) }) }) } @@ -103,6 +109,7 @@ const getCommits = (url, callbackFunction) => { fetch(url, Auth) .then(res => res.json()) .then(data => { + //console.log(data) callbackFunction(data) }) } @@ -113,6 +120,8 @@ searchForm.addEventListener('submit', (e) => { // this function filters your repos where name contains searchField.value. Where IndexOf returns the position of substring and -1 = doesn't exist in string const found = repos.filter(repo => repo.name.indexOf(searchField.value) > -1); + + getPullRequests(found); }) \ No newline at end of file From 8a06966a293e197c95de42430912200df3d4936b Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Fri, 25 Feb 2022 12:04:16 +0100 Subject: [PATCH 05/10] update netlify --- README.md | 2 +- chart.js | 43 ++----------------------------------------- script.js | 45 ++++++++++----------------------------------- style.css | 12 ++++++------ 4 files changed, 19 insertions(+), 83 deletions(-) diff --git a/README.md b/README.md index 70a44ba3..6f067dba 100644 --- a/README.md +++ b/README.md @@ -44,4 +44,4 @@ Your page should include: ## 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. +https://pedantic-roentgen-a54a90.netlify.app/ diff --git a/chart.js b/chart.js index aa550027..580f8357 100644 --- a/chart.js +++ b/chart.js @@ -14,7 +14,7 @@ const labels = [ label: 'My First dataset', backgroundColor: [ '#a07a99', - '#a7c0b8', + '#125e91', ], borderColor: '#000000', data: [amount, 19 - amount], @@ -38,48 +38,9 @@ const labels = [ const config = { type: 'doughnut', - data: data, + data:data, options: options }; const myChart = new Chart(ctx, config); } - - /* -const drawChart = (amount) => { - const config = { - type: 'doughnut', - data: { - labels: [ - 'Completed projects', - 'Projects to do', - ], - datasets: [{ - label: 'My First Dataset', - data: [amount, 19 - amount], - backgroundColor: [ - '#a07a99', - '#a7c0b8', - ], - - hoverOffset: 4 - }] - }, - options: { - layout: { - padding: 25 - }, - plugins: { - legend: { - labels: { - font: { - size: 15 - } - } - } - } - } - }; - const myChart = new Chart(ctx, config); -} -*/ \ No newline at end of file diff --git a/script.js b/script.js index 341528f7..0fa061b2 100644 --- a/script.js +++ b/script.js @@ -21,8 +21,6 @@ const userProfile = () => { fetch(USER_URL, Auth) .then(res => res.json()) .then(data => { - //console.log(data) - userContainer.innerHTML = `

${data.name}

@@ -33,33 +31,22 @@ const userProfile = () => {
` }) } - userProfile() const getRepos = () => { fetch(REPOS_URL, Auth) .then(response => response.json()) .then(data => { - - //console.log(data) - const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) - - //console.log(forkedRepos) - - getPullRequests(forkedRepos) drawChart(forkedRepos.length) }) - } getRepos() //function to get the repos const getPullRequests = (repos) => { - //console.log(repos) - projectsContainer.innerHTML = ''; repos.forEach(repo => { //console.log(repo.name) @@ -68,21 +55,8 @@ const getPullRequests = (repos) => { .then(res => res.json()) .then(data => { - console.log(data) - console.log(data[0].base.user.followers_url) - - const myPullRequest = data.filter((pull) => { - - //console.log('pull-'+ pull.user.login.startsWith('eyahya')) - //console.log('repo-'+ repo.owner.login.startsWith('eyahya')) - return pull.user.login === repo.owner.login - }) - //console.log('hello:' + myPullRequest.length) -/* - if (myPullRequest.length === 0) { - return - }*/ - + const myPullRequest = data.filter((pull) => { return pull.user.login === repo.owner.login }) + const commitUrl = myPullRequest[0].commits_url //display commits info const displayInfo = (data) => { @@ -109,19 +83,20 @@ const getCommits = (url, callbackFunction) => { fetch(url, Auth) .then(res => res.json()) .then(data => { - //console.log(data) + console.log(data.length) callbackFunction(data) }) } + //eventlistener on form-submit searchForm.addEventListener('submit', (e) => { e.preventDefault(); + let searchInput = searchField.value + let searchArray = [] + + searchInput = searchArray.push(searchInput) - // this function filters your repos where name contains searchField.value. Where IndexOf returns the position of substring and -1 = doesn't exist in string - const found = repos.filter(repo => repo.name.indexOf(searchField.value) > -1); - - - - getPullRequests(found); +console.log(typeof(searchArray)) + //getPullRequests(searchArray); }) \ No newline at end of file diff --git a/style.css b/style.css index 2c3451fa..1d34cf59 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ body { /*header*/ .header { - background-color: #7aa094; + background-color: #125e91; display: grid; grid-column: span 12; justify-content: center; @@ -119,7 +119,7 @@ form#search-form { /*repos*/ .box-repo { padding: 10px; - background-color: #7aa094; + background-color: #125e91; display: grid; grid-column: span 12; border-radius: 25px 0px; @@ -129,7 +129,7 @@ form#search-form { text-align:center; margin-block-start: 0em; margin-block-end: 0.2em; - font-size: 15px; + font-size: 16px; } .box-repo h3 { @@ -167,7 +167,7 @@ form#search-form { .lds-ripple div { position: absolute; - border: 4px solid #7aa094; + border: 4px solid #125e91; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; @@ -244,14 +244,13 @@ form#search-form { .header { - background-color: #7aa094; display: grid; grid-column: span 12; } .my-profile { grid-template-areas: ". info image"; - grid-template-columns: 3fr 3fr 3fr 3fr; + grid-template-columns: 4fr 4fr 4fr 4fr; } .profileinfo { @@ -265,6 +264,7 @@ form#search-form { .profileimg img { max-height: 200px; + max-width: 200px; } From 715e9285d0c0ba174bba44b97978efd0a9cd59cf Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Sat, 26 Feb 2022 19:04:53 +0100 Subject: [PATCH 06/10] final update --- index.html | 1 + script.js | 45 +++++++++++++++------------------------------ 2 files changed, 16 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index b680fc4f..71b5bce9 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@

GitHub Tracker

+
diff --git a/script.js b/script.js index 0fa061b2..f5631cbc 100644 --- a/script.js +++ b/script.js @@ -29,6 +29,7 @@ const userProfile = () => {
` + }) } userProfile() @@ -49,7 +50,6 @@ const getPullRequests = (repos) => { projectsContainer.innerHTML = ''; repos.forEach(repo => { - //console.log(repo.name) fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, Auth) .then(res => res.json()) @@ -58,45 +58,30 @@ const getPullRequests = (repos) => { const myPullRequest = data.filter((pull) => { return pull.user.login === repo.owner.login }) const commitUrl = myPullRequest[0].commits_url - //display commits info - const displayInfo = (data) => { - //console.log(data) + + //modalDisplay(commitUrl) + + fetch(commitUrl) + .then(res => res.json()) + .then(data => { + + const numberCommit = data.length + //added function so the DOM do not self close tags let boxHtml = `
`; boxHtml += `

${repo.name}

` - boxHtml += `

Number of commits: ${data.length}

` + boxHtml += `

Number of commits: ${numberCommit}

` boxHtml += `

Created at: ${new Date(repo.created_at).toDateString()}

` boxHtml += `

Last update: ${new Date(repo.pushed_at).toDateString()}

` boxHtml += `

Default branch: ${repo.default_branch}

` + boxHtml += `

First comments: ${data[0].commit.message}

` + boxHtml += `

Last comments: ${data[data.length-1].commit.message}

` boxHtml += `

Go to repo

` boxHtml += '
' projectsContainer.innerHTML += boxHtml; //closing the div tag ldsripple.style.display = 'none' //loading icon - } - getCommits(commitUrl, displayInfo) + + }) }) - }) -} - -//get my commits -const getCommits = (url, callbackFunction) => { - fetch(url, Auth) - .then(res => res.json()) - .then(data => { - console.log(data.length) - callbackFunction(data) }) } - - -//eventlistener on form-submit -searchForm.addEventListener('submit', (e) => { - e.preventDefault(); - let searchInput = searchField.value - let searchArray = [] - - searchInput = searchArray.push(searchInput) - -console.log(typeof(searchArray)) - //getPullRequests(searchArray); -}) \ No newline at end of file From ca445498d83a3f41d04829474c72cd62644f2c31 Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Sat, 26 Feb 2022 19:07:00 +0100 Subject: [PATCH 07/10] final update --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 71b5bce9..b680fc4f 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,6 @@

GitHub Tracker

-
From 18c1fd745950c7d871c835e1de4a4f97a6902c24 Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Sat, 26 Feb 2022 19:14:09 +0100 Subject: [PATCH 08/10] final update --- index.html | 1 + script.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b680fc4f..2edc26d0 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@

GitHub Tracker

+
diff --git a/script.js b/script.js index f5631cbc..e1bcc449 100644 --- a/script.js +++ b/script.js @@ -41,6 +41,8 @@ const getRepos = () => { const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) getPullRequests(forkedRepos) drawChart(forkedRepos.length) + + }) } getRepos() @@ -74,8 +76,7 @@ const getPullRequests = (repos) => { boxHtml += `

Created at: ${new Date(repo.created_at).toDateString()}

` boxHtml += `

Last update: ${new Date(repo.pushed_at).toDateString()}

` boxHtml += `

Default branch: ${repo.default_branch}

` - boxHtml += `

First comments: ${data[0].commit.message}

` - boxHtml += `

Last comments: ${data[data.length-1].commit.message}

` + //boxHtml += `

First comments: ${data[0].commit.message}

` boxHtml += `

Go to repo

` boxHtml += '' projectsContainer.innerHTML += boxHtml; //closing the div tag From eba18f9bed7e1e40460dc85f1c4fb46ccbbf9f2f Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Sun, 27 Feb 2022 09:26:35 +0100 Subject: [PATCH 09/10] display comments --- index.html | 1 - script.js | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/index.html b/index.html index 2edc26d0..d233369a 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ Eyahya's GitHub Tracker - diff --git a/script.js b/script.js index e1bcc449..179a7557 100644 --- a/script.js +++ b/script.js @@ -41,8 +41,6 @@ const getRepos = () => { const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) getPullRequests(forkedRepos) drawChart(forkedRepos.length) - - }) } getRepos() @@ -76,7 +74,7 @@ const getPullRequests = (repos) => { boxHtml += `

Created at: ${new Date(repo.created_at).toDateString()}

` boxHtml += `

Last update: ${new Date(repo.pushed_at).toDateString()}

` boxHtml += `

Default branch: ${repo.default_branch}

` - //boxHtml += `

First comments: ${data[0].commit.message}

` + boxHtml += `

First comments: ${data[0].commit.message}

` boxHtml += `

Go to repo

` boxHtml += '' projectsContainer.innerHTML += boxHtml; //closing the div tag From 2815545b02024f188fd311ed709ea92a811be0b4 Mon Sep 17 00:00:00 2001 From: eyahya-khan Date: Sun, 27 Feb 2022 10:24:13 +0100 Subject: [PATCH 10/10] added last commen --- index.html | 2 -- script.js | 9 ++++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d233369a..03b69217 100644 --- a/index.html +++ b/index.html @@ -23,13 +23,11 @@

GitHub Tracker

-
-
diff --git a/script.js b/script.js index 179a7557..870ea11c 100644 --- a/script.js +++ b/script.js @@ -59,13 +59,11 @@ const getPullRequests = (repos) => { const commitUrl = myPullRequest[0].commits_url - //modalDisplay(commitUrl) - fetch(commitUrl) .then(res => res.json()) .then(data => { - const numberCommit = data.length + const numberCommit = data.length //added function so the DOM do not self close tags let boxHtml = `
`; @@ -74,13 +72,14 @@ const getPullRequests = (repos) => { boxHtml += `

Created at: ${new Date(repo.created_at).toDateString()}

` boxHtml += `

Last update: ${new Date(repo.pushed_at).toDateString()}

` boxHtml += `

Default branch: ${repo.default_branch}

` - boxHtml += `

First comments: ${data[0].commit.message}

` + boxHtml += `

First comment: ${data[0].commit.message}

` + boxHtml += `

Last comment: ${data[numberCommit-1].commit.message}

` boxHtml += `

Go to repo

` boxHtml += '
' projectsContainer.innerHTML += boxHtml; //closing the div tag ldsripple.style.display = 'none' //loading icon - }) + }) }) }