Skip to content

Commit 6fda314

Browse files
mathildakarlssonmathildakarlsson
committed
I tried to finish the commit-nr and chart, but neither will show atm. Updated readme
1 parent 4604a1a commit 6fda314

5 files changed

Lines changed: 216 additions & 80 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
# GitHub Tracker
22

3-
Replace this readme with your own information about your project.
3+
The assignment was to build a website that holds all Technigo-projects on Github. We should fetch these by API, and using filter to display the correct ones.
44

5-
Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
5+
Furthermore the website should include some information from each repository, such as default branch and number of commit messages.
6+
7+
The website should also include a chart that showed how many projects was done in the Bootcamp.
68

79
## The problem
810

9-
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?
11+
I started with fetching the Github API for my user and my repositories. Then I could display my username and profile pic as well as filter out the repositories so only the forked ones marked as "project-" was displayed.
12+
13+
I continued with building up info about default branch etc in innerHTML. Then I fetched all pullrequests and filtered out so only my own was left by comparing "pull.user.login" with "repo.owner.login". Then I tried to display number of commits by using the commit_url, but for some reason it won't show. I will take a closer look at this and ask for help in StackOverflow.
14+
15+
Then I created a chart using chart.js. It went well with styling etc but when I tried to wrap it up in a function that I then called in the js-file the chart wouldn't show at all on the website. I tried different things but as for the commit-issue I will have to dig deeper on this one. Hopefully some of my classmates can help me.
16+
17+
For this project I used a personal API token from Github, and making it secret by using secret.js and gitignore.
18+
19+
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.
1020

1121
## View it live
1222

13-
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.
23+
https://serene-mayer-c47183.netlify.app/

‎code/chart.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11

22
//DOM-selector for the canvas
3-
const ctx = document.getElementById('myChart')
3+
const ctx = document.getElementById('chart').getContext("2d");
44

55
//drawing the chart
6+
const drawChart = (projects) => {
67
const labels = [
78
'Finished projects',
89
'Upcoming projects',
@@ -11,9 +12,9 @@ const labels = [
1112
const data = {
1213
labels: labels,
1314
datasets: [{
14-
label: 'Bootcamp progress',
15-
backgroundColor: ['rgb(255, 99, 132)', 'rgb(104, 131, 180)'],
16-
data: [6, 11],
15+
data: [projects, 19-projects],
16+
label: 'Bootcamp progress',
17+
backgroundColor: ['rgb(255, 99, 132)', 'rgb(104, 131, 180)'],
1718
}]
1819
};
1920

@@ -23,7 +24,5 @@ const config = {
2324
options: {}
2425
};
2526

26-
const myChart = new Chart(
27-
document.getElementById('technigoProgress'),
28-
config
29-
);
27+
new Chart(document.getElementById('chart'),config);
28+
}

‎code/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@ <h2 class="projects-header">PROJECTS</h2>
2323
<div id="projects-container" class="projects-container"></div>
2424
<h2 class="chart-header">PROGRESS</h2>
2525
<div class="chart">
26-
<canvas id="technigoProgress"></canvas>
26+
<canvas id="chart"></canvas>
2727
</div>
2828
</main>
2929

3030
<footer>
3131
<p>Technigo Web Development Bootcamp 2022</p>
3232
</footer>
3333

34-
<script src="./chart.js"></script>
3534
<script src="./secret.js"></script>
3635
<script src="./script.js"></script>
36+
<script src="./chart.js"></script>
3737

3838
</body>
3939

‎code/script.js‎

Lines changed: 186 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,127 @@
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+
1118
// DOM-selectors stored as variables
2119
const userContainer = document.getElementById('user-container')
3120
const projectsContainer = document.getElementById('projects-container')
4121

5122
// global variables + storing API
123+
let repo
6124
const username = 'mathildakarlsson'
7-
let reponame
8125
const API_USER = `https://api.github.com/users/${username}`
9126
const API_REPOS = `https://api.github.com/users/${username}/repos`
10127

@@ -29,82 +146,86 @@ const getUser = () => {
29146
</div>
30147
`
31148
})
32-
getRepos() //invoking step 2
33149
}
34150

151+
getUser() //invoking step 1
152+
35153
//step 2 - fetch repos and filter + open/closing accordion
36154
const getRepos = () => {
37155
fetch(API_REPOS, options)
38156
.then(res => res.json())
39-
.then(data => {
40-
// console.log(data)
41-
const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
42-
filteredRepos.forEach((data) => {
43-
projectsContainer.innerHTML += `
44-
<div class="repos" id="${data.name}">
45-
<button class="project-name">${data.name}</button>
46-
<div class="panel">
47-
<a href="${data.html_url}">
48-
<p>Link to repo</p></a>
49-
<p>Branch: ${data.default_branch}</p>
50-
<p id="${data.name}">Nr of commits: </p>
51-
<p>Main language: ${data.language}</p>
52-
<p>Latest push: ${data.pushed_at}</p>
157+
.then((data) => {
158+
const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
159+
filteredRepos.forEach((repo) => {
160+
projectsContainer.innerHTML += `
161+
<div class="repos" id="${repo.name}">
162+
<button class="project-name">${repo.name}</button>
163+
<div class="panel">
164+
<a href="${repo.html_url}">
165+
<p>Link to repo</p></a>
166+
<p>Branch: ${repo.default_branch}</p>
167+
<p>Nr of commits: ${repo.length}</p>
168+
<p>Main language: ${repo.language}</p>
169+
<p>Latest push: ${new Date(repo.pushed_at).toDateString()}</p>
170+
</div>
53171
</div>
54-
</div>
55-
`
56-
// Open and close accordion with project info
57-
const acc = document.getElementsByClassName("project-name")
58-
let i
59-
for (i = 0; i < acc.length; i++) {
60-
acc[i].addEventListener("click", function() {
61-
this.classList.toggle("active")
62-
const panel = this.nextElementSibling
63-
if (panel.style.maxHeight) {
64-
panel.style.maxHeight = null
65-
} else {
66-
panel.style.maxHeight = panel.scrollHeight + "px"
67-
}
68-
})
69-
}
70-
})
71-
72-
// step 3 - fetch pull requests
73-
const API_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`
74-
const getPullRequests = (data) => {
75-
data.forEach(repo => {
76-
fetch(API_PR, options)
77-
.then(res => res.json())
78-
.then(data => {
79-
const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
80-
const API_COMMIT = myPullRequests.commits_url
81-
const dataName = data.name
82-
if (myPullRequests) {
83-
getCommits(API_COMMIT, dataName)
84-
} else {
85-
projectsContainer.innerHTML += `
86-
<p>No pull requests made</p>
87-
`
88-
}
89-
})
172+
`
173+
//Open and close accordion with project info
174+
const acc = document.getElementsByClassName("project-name")
175+
let i
176+
for (i = 0; i < acc.length; i++) {
177+
acc[i].addEventListener("click", function() {
178+
this.classList.toggle("active")
179+
const panel = this.nextElementSibling
180+
if (panel.style.maxHeight) {
181+
panel.style.maxHeight = null
182+
} else {
183+
panel.style.maxHeight = panel.scrollHeight + "px"
184+
}
185+
})
186+
}
90187
})
91-
}
92-
93-
//invoke step 3, getPullRequests(filteredRepos)
94-
95188

96-
//Step 4 - fetch commits and display the amount
97-
const getCommits = (API_COMMIT, dataName) => {
98-
fetch(API_COMMIT, options)
189+
getPullRequests(filteredRepos)
190+
191+
drawChart(filteredRepos.length)
192+
})
193+
}
194+
getRepos()
195+
196+
// step 3 - fetch pull requests
197+
const API_PR = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`
198+
const getPullRequests = (filteredRepos) => {
199+
filteredRepos.forEach(repo => {
200+
fetch(API_PR, options)
99201
.then(res => res.json())
100202
.then(data => {
101-
// let numberOfCommits = [data.length]
102-
document.getElementById(dataName).innerHTML += `
103-
<p>Number of commits: ${data.length}</p>
104-
`
105-
})
203+
console.log(data)
204+
205+
const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
206+
207+
if (myPullRequests) {
208+
getCommits(myPullRequests.commits_url, repo.name)
209+
} else {
210+
document.getElementById(`${repo.name}`).innerHTML += `
211+
<p>No commits</p>
212+
`
106213
}
107214
})
215+
216+
//Step 4 - fetch commits and display the amount
217+
const getCommits = (URL, repoName) => {
218+
fetch(URL, options)
219+
.then(res => res.json())
220+
.then(data => {
221+
document.getElementById(`${repo.name}`).innerHTML += `
222+
<p> Number of commits: ${data.length}</p>
223+
`
224+
console.log(data.length)
225+
})
226+
}
227+
228+
})
108229
}
109-
getUser() //invoking step 1
230+
110231

‎code/style.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@ a {
9292
background-color: rgb(104, 131, 180);
9393
}
9494

95+
.project-name:hover {
96+
font-weight: 800;
97+
background-color: rgb(59, 83, 129);
98+
}
99+
95100
.panel {
96101
max-height: 0;
97102
overflow: hidden;
@@ -116,6 +121,7 @@ a {
116121
.active {
117122
font-weight: bold;
118123
border-radius: 1em;
124+
background-color: rgb(59, 83, 129);
119125
}
120126

121127
.chart-header {
@@ -128,7 +134,7 @@ a {
128134

129135
.chart {
130136
height: 50vh;
131-
width: 80vw;
137+
width: 50vw;
132138
margin-left: 2.5em;
133139
}
134140

0 commit comments

Comments
 (0)