Skip to content

Commit 4604a1a

Browse files
mathildakarlssonmathildakarlsson
committed
cleaned up code and made comments
1 parent df62673 commit 4604a1a

8 files changed

Lines changed: 72 additions & 103 deletions

File tree

‎code/chart.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11

2-
//DOM-selector for the canvas 👇
2+
//DOM-selector for the canvas
33
const ctx = document.getElementById('myChart')
44

5-
//"Draw" the chart here 👇
5+
//drawing the chart
66
const labels = [
77
'Finished projects',
88
'Upcoming projects',
9-
];
9+
];
1010

11-
const data = {
11+
const data = {
1212
labels: labels,
1313
datasets: [{
1414
label: 'Bootcamp progress',
1515
backgroundColor: ['rgb(255, 99, 132)', 'rgb(104, 131, 180)'],
1616
data: [6, 11],
1717
}]
18-
};
18+
};
1919

20-
const config = {
20+
const config = {
2121
type: 'doughnut',
2222
data: data,
2323
options: {}
24-
};
24+
};
2525

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

‎code/images/mobile-background-2.jpg‎

-5.08 MB
Binary file not shown.

‎code/images/mobile-background.jpg‎

-744 KB
Binary file not shown.

‎code/images/user-background-2.jpg‎

-4.01 MB
Binary file not shown.

‎code/images/user-background.jpg‎

-2.57 MB
Binary file not shown.

‎code/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,23 @@
1313
</head>
1414

1515
<body>
16+
1617
<main>
1718
<div id="user-container" class="user-container">
1819
<h1 class="github-tracker">GitHub Tracker</h1>
1920
<h2 class="user-header">USER</h2>
2021
</div>
21-
<!-- <img class="hero-img" src="images/mobile-background.jpg"> -->
2222
<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="chart"></canvas>
26+
<canvas id="technigoProgress"></canvas>
2727
</div>
2828
</main>
29+
2930
<footer>
3031
<p>Technigo Web Development Bootcamp 2022</p>
3132
</footer>
32-
<!-- This will be used to draw the chart 👇 -->
3333

3434
<script src="./chart.js"></script>
3535
<script src="./secret.js"></script>

‎code/script.js‎

Lines changed: 45 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,21 @@
22
const userContainer = document.getElementById('user-container')
33
const projectsContainer = document.getElementById('projects-container')
44

5-
// global variables
5+
// global variables + storing API
66
const username = 'mathildakarlsson'
7+
let reponame
78
const API_USER = `https://api.github.com/users/${username}`
89
const API_REPOS = `https://api.github.com/users/${username}/repos`
9-
let reponame
1010

1111
//personal token
1212
const options = {
1313
method: 'GET',
1414
headers: {
15-
Authorization: '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'
16-
}
17-
}
18-
15+
Authorization: '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'
16+
}
17+
}
1918

20-
// fetch user
19+
// step 1 - fetch user
2120
const getUser = () => {
2221
fetch(API_USER, options)
2322
.then(res => res.json())
@@ -28,27 +27,21 @@ const getUser = () => {
2827
<a href="https://github.com/"><img class="github-logo" src="images/GitHub-Mark-32px.png"></a>
2928
<a href="https://github.com/mathildakarlsson" class="user-name">${data.login}</a>
3029
</div>
31-
`
30+
`
3231
})
33-
getRepos()
32+
getRepos() //invoking step 2
3433
}
3534

36-
37-
//Fetch 1
38-
35+
//step 2 - fetch repos and filter + open/closing accordion
3936
const getRepos = () => {
40-
4137
fetch(API_REPOS, options)
4238
.then(res => res.json())
4339
.then(data => {
44-
console.log(data)
45-
40+
// console.log(data)
4641
const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
47-
48-
49-
filteredRepos.forEach((data) => {
42+
filteredRepos.forEach((data) => {
5043
projectsContainer.innerHTML += `
51-
<div class="repos" id="${data.name}">
44+
<div class="repos" id="${data.name}">
5245
<button class="project-name">${data.name}</button>
5346
<div class="panel">
5447
<a href="${data.html_url}">
@@ -57,32 +50,26 @@ const getRepos = () => {
5750
<p id="${data.name}">Nr of commits: </p>
5851
<p>Main language: ${data.language}</p>
5952
<p>Latest push: ${data.pushed_at}</p>
60-
</div>
61-
</div>
62-
`
63-
64-
// Open and close panel
65-
const acc = document.getElementsByClassName("project-name")
66-
let i
67-
68-
for (i = 0; i < acc.length; i++) {
69-
acc[i].addEventListener("click", function() {
70-
this.classList.toggle("active")
71-
const panel = this.nextElementSibling
72-
if (panel.style.maxHeight) {
53+
</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) {
7364
panel.style.maxHeight = null
74-
} else {
65+
} else {
7566
panel.style.maxHeight = panel.scrollHeight + "px"
76-
}
77-
})
78-
}
67+
}
7968
})
80-
// myChart()
81-
82-
83-
84-
// Fetch 2
85-
69+
}
70+
})
71+
72+
// step 3 - fetch pull requests
8673
const API_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls`
8774
const getPullRequests = (data) => {
8875
data.forEach(repo => {
@@ -100,31 +87,24 @@ const getRepos = () => {
10087
`
10188
}
10289
})
103-
getPullRequests(filteredRepos)
104-
})
105-
}
106-
107-
108-
109-
110-
111-
//Fetch 3
112-
const getCommits = (API_COMMIT, dataName) => {
113-
fetch(API_COMMIT, options)
114-
.then(res => res.json())
115-
.then(data => {
116-
// let numberOfCommits = [data.length]
117-
document.getElementById(dataName).innerHTML += `
118-
<p>Number of commits: ${data.length}</p>
119-
`
12090
})
12191
}
122-
})
123-
124-
92+
93+
//invoke step 3, getPullRequests(filteredRepos)
94+
12595

96+
//Step 4 - fetch commits and display the amount
97+
const getCommits = (API_COMMIT, dataName) => {
98+
fetch(API_COMMIT, options)
99+
.then(res => res.json())
100+
.then(data => {
101+
// let numberOfCommits = [data.length]
102+
document.getElementById(dataName).innerHTML += `
103+
<p>Number of commits: ${data.length}</p>
104+
`
105+
})
106+
}
107+
})
126108
}
127-
128-
getUser()
129-
109+
getUser() //invoking step 1
130110

‎code/style.css‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,13 @@ a {
1616
font-weight: 600;
1717
}
1818

19-
2019
.user-container {
2120
height: 100vh;
2221
display: flex;
23-
/* justify-content: center; */
2422
flex-direction: column;
25-
/* margin-top: 5em; */
2623
}
2724

2825
.github-tracker {
29-
/* padding: 1em; */
3026
margin-top: 3.5em;
3127
padding: 2em;
3228
font-size: 30px;
@@ -67,12 +63,10 @@ a {
6763
}
6864

6965
.projects-container {
70-
/* width: 100vw; */
7166
display: flex;
7267
flex-direction: column;
7368
flex-wrap: nowrap;
7469
align-items: center;
75-
/* margin-top: 6em; */
7670
}
7771

7872
.projects-header {
@@ -95,7 +89,6 @@ a {
9589
transition: 1s;
9690
overflow: visible;
9791
text-align: center;
98-
/* justify-self: center; */
9992
background-color: rgb(104, 131, 180);
10093
}
10194

@@ -150,29 +143,27 @@ footer {
150143

151144
/* TABLET */
152145
@media screen and (min-width: 667px) and (max-width: 1024px) {
153-
.projects-container {
154-
display: grid;
155-
grid-template-columns: repeat(2, 1fr);
156-
align-items: center;
157-
justify-items: center;
158-
159-
}
146+
.projects-container {
147+
display: grid;
148+
grid-template-columns: repeat(2, 1fr);
149+
align-items: center;
150+
justify-items: center;
151+
152+
}
160153

161-
.project-name {
162-
width: 40vw;
163-
}
154+
.project-name {
155+
width: 40vw;
156+
}
164157

165-
.chart {
166-
height: 30vh;
167-
width: 40vw;
168-
}
158+
.chart {
159+
height: 30vh;
160+
width: 40vw;
161+
}
169162
}
170163

171164
/* DESKTOP */
172165
@media (min-width: 1024px) {
173166

174-
175-
176167
.user-container {
177168
flex-direction: row;
178169
flex-wrap: nowrap;
@@ -249,6 +240,4 @@ footer {
249240
width: 25vw;
250241
margin: 1em .5em 2em .5em;
251242
}
252-
253-
254243
}

0 commit comments

Comments
 (0)