Skip to content

Commit b7cd4a9

Browse files
author
Your name here
committed
added the project name, profile pic, last push and URL
1 parent 8d43c53 commit b7cd4a9

4 files changed

Lines changed: 103 additions & 46 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"liveServer.settings.port": 5505
3-
}
2+
"liveServer.settings.port": 5505,
3+
"prettier.arrowParens": "avoid"
4+
}

‎code/chart.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,22 @@
22
const ctx = document.getElementById("chart").getContext("2d");
33

44
//"Draw" the chart here 👇
5-
// const config = {
6-
// type: "line",
7-
// data: data,
8-
// options: {},
9-
// };
5+
6+
const drawChart = amount => {
7+
const config = {
8+
type: "pie",
9+
data: {
10+
labels: ["finished projects", "projects left"],
11+
12+
datasets: [
13+
{
14+
label: "My First Dataset",
15+
data: [amount, 20 - amount],
16+
backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"],
17+
hoverOffset: 4,
18+
},
19+
],
20+
},
21+
};
22+
const myChart = new Chart(ctx, config);
23+
};

‎code/index.html‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Project GitHub Tracker</title>
8-
<link rel="stylesheet" href="./style.css" />
9-
</head>
10-
<body>
11-
<h1>GitHub Tracker</h1>
12-
<h2>Projects:</h2>
13-
<main id="projects"></main>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Project GitHub Tracker</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10+
</head>
11+
<body>
12+
<h1>GitHub Tracker</h1>
13+
<div id="profile"></div>
14+
<h2>Projects:</h2>
15+
<main id="projects"></main>
1416

15-
<!-- This will be used to draw the chart 👇 -->
16-
<canvas id="chart"></canvas>
17+
<!-- This will be used to draw the chart 👇 -->
18+
<canvas id="chart"></canvas>
1719

18-
<script src="./script.js"></script>
19-
<script src="./chart.js"></script>
20-
</body>
21-
</html>
20+
<script src="./script.js"></script>
21+
<script src="./chart.js"></script>
22+
</body>
23+
</html>

‎code/script.js‎

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,67 @@
1-
const GITHUB_URL = "https://api.github.com/users/efstasia/repos";
1+
const USER = "efstasia";
2+
const GITHUB_URL = `https://api.github.com/users/${USER}/repos`;
3+
const projectsContainer = document.getElementById("projects");
4+
const pullContainer = document.getElementById("pull-requests");
5+
const profileInfo = document.getElementById("profile");
26

3-
fetch(GITHUB_URL)
4-
.then((response) => {
5-
return response.json();
6-
})
7-
.then((json) => {
8-
console.log(json);
9-
});
7+
// function to get profile picture and name
8+
const profile = () => {
9+
fetch(`https://api.github.com/users/${USER}`)
10+
.then(response => {
11+
return response.json();
12+
})
13+
.then(json => {
14+
profileInfo.innerHTML += `
15+
<h3>Username: ${json.login}</h3>
16+
<img src=${json.avatar_url}>
17+
`;
18+
});
19+
};
20+
profile(); // invoking the profile function
1021

11-
// const getPullRequests = (repos) => {
12-
// //Get all the PRs for each project.
13-
// repos.forEach((repo) => {
14-
// fetch(GITHUB_URL)
15-
// .then((res) => res.json())
16-
// .then((data) => {
17-
// console.log(data);
18-
// //TODO
19-
// //1. Find only the PR that you made by comparing pull.user.login
20-
// // with either USER or repo.owner.login
21-
// //2. Now you're able to get the commits for each repo by using
22-
// // the commits_url as an argument to call another function
23-
// //3. You can also get the comments for each PR by calling
24-
// // another function with the review_comments_url as argument
22+
// function to get all of the repos and commits
23+
const getRepos = () => {
24+
fetch(GITHUB_URL)
25+
.then(response => {
26+
return response.json();
27+
})
28+
.then(json => {
29+
console.log(json);
30+
const forkedRepos = json.filter(
31+
repo => repo.fork && repo.name.startsWith("project-")
32+
);
33+
forkedRepos.forEach(
34+
repo =>
35+
(projectsContainer.innerHTML += `<h3>Name of repo: ${repo.name}</h3>
36+
<p>Most recent push: ${repo.pushed_at.slice(
37+
0,
38+
10
39+
)} at ${repo.pushed_at.slice(11, 16)} from ${
40+
repo.default_branch
41+
} branch</p>
42+
URL: <a href=${repo.html_url}>CLICK HERE</a>`)
43+
);
44+
drawChart(forkedRepos.length);
45+
});
46+
};
47+
getRepos(); // invoking the function
48+
49+
// this gets the repos
50+
// const getPullRequests = repos => {
51+
// repos.forEach(repo => {
52+
// fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`)
53+
// .then(response => response.json())
54+
// .then(json => {
55+
// console.log(json);
56+
57+
// const filterPulls = json.filter(pull =>
58+
// pull.user.login.includes("efstasia")
59+
// );
60+
// console.log("FILTER PULLS", filterPulls);
61+
// filterPulls.forEach(
62+
// repo =>
63+
// (pullContainer.innerHTML += `<h3>halloj vart är dom andra?? ${repo.name} ${repo.html_url}</h3>`)
64+
// );
2565
// });
2666
// });
2767
// };

0 commit comments

Comments
 (0)