Skip to content

Commit 739bb86

Browse files
mathildakarlssonmathildakarlsson
committed
updated readme, removed some console.log and unused code, added some comments, made token secret
1 parent 6fda314 commit 739bb86

2 files changed

Lines changed: 105 additions & 125 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ For this project I used a personal API token from Github, and making it secret b
1818

1919
Lastly I styled the webpage and made it responsive. I'm happy with the accordion and the way the flex/grid is responsive, but there's some things in the user-section that doesn't look quite right in desktop-size. I think it is because of the position: absolute and how the headers are positioned in relation to the profile pic and the chart.
2020

21+
Since I still have some issues that needs to be fixed, I'll save my commented out code in js-file for now. I've tried some different approaches and need to see which could best be modified.
22+
2123
## View it live
2224

2325
https://serene-mayer-c47183.netlify.app/

‎code/script.js‎

Lines changed: 103 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,3 @@
1-
// // DOM-selectors stored as variables
2-
// const userContainer = document.getElementById('user-container')
3-
// const projectsContainer = document.getElementById('projects-container')
4-
5-
// // global variables + storing API
6-
// const username = 'mathildakarlsson'
7-
// const API_USER = `https://api.github.com/users/${username}`
8-
// const API_REPOS = `https://api.github.com/users/${username}/repos`
9-
10-
// //personal token
11-
// const options = {
12-
// method: 'GET',
13-
// headers: {
14-
// Authorization: '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'
15-
// }
16-
// }
17-
18-
// // step 1 - fetch user
19-
// const getUser = () => {
20-
// fetch(API_USER, options)
21-
// .then(res => res.json())
22-
// .then(data => {
23-
// userContainer.innerHTML += `
24-
// <img class="user-img"src="${data.avatar_url}">
25-
// <div class="github-user">
26-
// <a href="https://github.com/"><img class="github-logo" src="images/GitHub-Mark-32px.png"></a>
27-
// <a href="https://github.com/mathildakarlsson" class="user-name">${data.login}</a>
28-
// </div>
29-
// `
30-
// })
31-
// getRepos() //invoking step 2
32-
// }
33-
34-
// //step 2 - fetch repos and filter + open/closing accordion
35-
// const getRepos = () => {
36-
// fetch(API_REPOS, options)
37-
// .then(res => res.json())
38-
// .then(data => {
39-
// let repo
40-
// const repoName = repo.name
41-
// console.log(data)
42-
// const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
43-
// filteredRepos.forEach((repo) => {
44-
// projectsContainer.innerHTML += `
45-
// <div class="repos">
46-
// <button class="project-name">${repo.name}</button>
47-
// <div class="panel">
48-
// <a href="${repo.html_url}">
49-
// <p>Link to repo</p></a>
50-
// <p>Branch: ${repo.default_branch}</p>
51-
// <p id="${repo.name}">Nr of commits: </p>
52-
// <p>Main language: ${repo.language}</p>
53-
// <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
54-
// </div>
55-
// </div>
56-
// `
57-
// // Open and close accordion with project info
58-
// const acc = document.getElementsByClassName("project-name")
59-
// let i
60-
// for (i = 0; i < acc.length; i++) {
61-
// acc[i].addEventListener("click", function() {
62-
// this.classList.toggle("active")
63-
// const panel = this.nextElementSibling
64-
// if (panel.style.maxHeight) {
65-
// panel.style.maxHeight = null
66-
// } else {
67-
// panel.style.maxHeight = panel.scrollHeight + "px"
68-
// }
69-
// })
70-
// }
71-
// })
72-
73-
// // step 3 - fetch pull requests
74-
// const API_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`
75-
// const getPullRequests = (filteredRepos) => {
76-
// filteredRepos.forEach(repo => {
77-
// fetch(API_PR, options)
78-
// .then(res => res.json())
79-
// .then(data => {
80-
// const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
81-
// const API_COMMIT = myPullRequests.commits_url
82-
// console.log(myPullRequests)
83-
// // const dataName = data.name
84-
// if (myPullRequests) {
85-
86-
// getCommits(myPullRequests, repo.name)
87-
// } else {
88-
// // projectsContainer.innerHTML += `
89-
// // <p>No pull requests made</p>
90-
// // `
91-
// }
92-
// })
93-
// })
94-
// drawChart(filteredRepos.length)
95-
// getPullRequests()
96-
// }
97-
// //Step 4 - fetch commits and display the amount
98-
// const getCommits = (myPullRequests, repoName) => {
99-
// fetch(myPullRequests.commits_url, options)
100-
// .then(res => res.json())
101-
// .then((commit) => {
102-
// // let numberOfCommits = [data.length]
103-
// document.getElementById(`comit-${repoName}`).innerHTML += `
104-
// <p> Number of commits: ${commit.length}</p>
105-
// `
106-
// // data.length
107-
108-
// })
109-
// }
110-
111-
// })
112-
113-
114-
115-
// }
116-
// getUser() //invoking step 1
117-
1181
// DOM-selectors stored as variables
1192
const userContainer = document.getElementById('user-container')
1203
const projectsContainer = document.getElementById('projects-container')
@@ -129,7 +12,7 @@ const API_REPOS = `https://api.github.com/users/${username}/repos`
12912
const options = {
13013
method: 'GET',
13114
headers: {
132-
Authorization: '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'
15+
Authorization: 'GITHUB_TOKEN'
13316
}
13417
}
13518

@@ -186,9 +69,9 @@ const getRepos = () => {
18669
}
18770
})
18871

189-
getPullRequests(filteredRepos)
72+
getPullRequests(filteredRepos) //invoke step 3
19073

191-
drawChart(filteredRepos.length)
74+
drawChart(filteredRepos.length) //invoke the functions that draws the chart, passing on the number of projects
19275
})
19376
}
19477
getRepos()
@@ -200,15 +83,14 @@ const getPullRequests = (filteredRepos) => {
20083
fetch(API_PR, options)
20184
.then(res => res.json())
20285
.then(data => {
203-
console.log(data)
20486

205-
const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
206-
87+
const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
88+
//for my pull requests - invoke step 4
20789
if (myPullRequests) {
20890
getCommits(myPullRequests.commits_url, repo.name)
20991
} else {
21092
document.getElementById(`${repo.name}`).innerHTML += `
211-
<p>No commits</p>
93+
<p>Commit made by group partner</p>
21294
`
21395
}
21496
})
@@ -221,11 +103,107 @@ const getCommits = (URL, repoName) => {
221103
document.getElementById(`${repo.name}`).innerHTML += `
222104
<p> Number of commits: ${data.length}</p>
223105
`
224-
console.log(data.length)
225106
})
226107
}
227108

228109
})
229110
}
230111

112+
113+
//------------ OLD CODE - MIGHT BE USEFUL ------------
114+
115+
// // step 1 - fetch user
116+
// const getUser = () => {
117+
// fetch(API_USER, options)
118+
// .then(res => res.json())
119+
// .then(data => {
120+
// userContainer.innerHTML += `
121+
// <img class="user-img"src="${data.avatar_url}">
122+
// <div class="github-user">
123+
// <a href="https://github.com/"><img class="github-logo" src="images/GitHub-Mark-32px.png"></a>
124+
// <a href="https://github.com/mathildakarlsson" class="user-name">${data.login}</a>
125+
// </div>
126+
// `
127+
// })
128+
// getRepos() //invoking step 2
129+
// }
130+
131+
// //step 2 - fetch repos and filter + open/closing accordion
132+
// const getRepos = () => {
133+
// fetch(API_REPOS, options)
134+
// .then(res => res.json())
135+
// .then(data => {
136+
// let repo
137+
// const repoName = repo.name
138+
// console.log(data)
139+
// const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
140+
// filteredRepos.forEach((repo) => {
141+
// projectsContainer.innerHTML += `
142+
// <div class="repos">
143+
// <button class="project-name">${repo.name}</button>
144+
// <div class="panel">
145+
// <a href="${repo.html_url}">
146+
// <p>Link to repo</p></a>
147+
// <p>Branch: ${repo.default_branch}</p>
148+
// <p id="${repo.name}">Nr of commits: </p>
149+
// <p>Main language: ${repo.language}</p>
150+
// <p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
151+
// </div>
152+
// </div>
153+
// `
154+
// // Open and close accordion with project info
155+
// const acc = document.getElementsByClassName("project-name")
156+
// let i
157+
// for (i = 0; i < acc.length; i++) {
158+
// acc[i].addEventListener("click", function() {
159+
// this.classList.toggle("active")
160+
// const panel = this.nextElementSibling
161+
// if (panel.style.maxHeight) {
162+
// panel.style.maxHeight = null
163+
// } else {
164+
// panel.style.maxHeight = panel.scrollHeight + "px"
165+
// }
166+
// })
167+
// }
168+
// })
169+
170+
// // step 3 - fetch pull requests
171+
// const API_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`
172+
// const getPullRequests = (filteredRepos) => {
173+
// filteredRepos.forEach(repo => {
174+
// fetch(API_PR, options)
175+
// .then(res => res.json())
176+
// .then(data => {
177+
// const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
178+
// const API_COMMIT = myPullRequests.commits_url
179+
// console.log(myPullRequests)
180+
// // const dataName = data.name
181+
// if (myPullRequests) {
182+
183+
// getCommits(myPullRequests, repo.name)
184+
// } else {
185+
// // projectsContainer.innerHTML += `
186+
// // <p>No pull requests made</p>
187+
// // `
188+
// }
189+
// })
190+
// })
191+
// drawChart(filteredRepos.length)
192+
// getPullRequests()
193+
// }
194+
// //Step 4 - fetch commits and display the amount
195+
// const getCommits = (myPullRequests, repoName) => {
196+
// fetch(myPullRequests.commits_url, options)
197+
// .then(res => res.json())
198+
// .then((commit) => {
199+
// // let numberOfCommits = [data.length]
200+
// document.getElementById(`comit-${repoName}`).innerHTML += `
201+
// <p> Number of commits: ${commit.length}</p>
202+
// `
203+
// // data.length
204+
// })
205+
// }
206+
// })
207+
// }
208+
// getUser() //invoking step 1
231209

0 commit comments

Comments
 (0)