Skip to content

Commit 4535e41

Browse files
DALA746DALA746
committed
added some small changes to the project
1 parent 534ced4 commit 4535e41

4 files changed

Lines changed: 222 additions & 249 deletions

File tree

‎code/chart.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
1-
const ctx = document.getElementById('chart').getContext('2d')
1+
const ctx = document.getElementById('chart').getContext('2d');
22

33
const drawChart = (number) => {
44
const config = {
55
type: 'doughnut',
66
data: {
7-
labels: ["Projects done", "Still to do"],
7+
labels: ['Done', 'Todo'],
88
datasets: [
99
{
10-
label: "My first Dataset",
10+
label: 'My first Dataset',
1111
data: [number, 20 - number], // divide donut to 2 different parts
12-
backgroundColor: [
13-
"rgb(255, 99, 132)",
14-
"rgb(54, 162, 235)",
15-
],
16-
hoverOffset:4,
12+
backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'],
13+
hoverOffset: 4,
1714
},
1815
],
1916
},
20-
}
17+
};
2118
const myChart = new Chart(ctx, config);
22-
};
19+
};

‎code/index.html‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,53 @@
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="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
9-
<!--CHART LIBRARY-->
10-
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11-
<link rel="stylesheet" href="./style.css" />
12-
13-
</head>
14-
<body>
15-
<nav class="topnav">
16-
<div class="logo-container">
17-
<i class="fab fa-github fa-3x"></i>
18-
<h4>GitHub Tracker</h4>
19-
</div>
20-
<!--<section class="search-container">
21-
<form class="example">
22-
<input type="text" placeholder="Search.." name="search" id="inputValue">
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>GitHub Tracker</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
11+
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
12+
crossorigin="anonymous"
13+
/>
14+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
15+
<link rel="stylesheet" href="./style.css" />
16+
</head>
17+
<body>
18+
<nav class="topnav">
19+
<div class="logo-container">
20+
<i class="fab fa-github fa-4x"></i>
21+
<h1>GitHub Tracker</h1>
22+
</div>
23+
<div class="input-container">
24+
<input
25+
type="text"
26+
placeholder="Search.."
27+
name="search"
28+
id="searchbar"
29+
/>
2330
<button type="submit" id="button"><i class="fa fa-search"></i></button>
24-
</form>
25-
</section>-->
26-
</nav>
27-
28-
<section class="container">
29-
<div class="statistics-container">
30-
<header id="header" class="user-information"></header>
31-
<main id="projects" class="project-container"></main>
32-
</div>
33-
34-
<div class="chart-container">
35-
<h2>Project Statistics</h2>
36-
<div class="doughnut">
37-
<canvas id="chart"></canvas>
3831
</div>
39-
</div>
40-
</section>
32+
</nav>
4133

42-
<script src="./script.js"></script>
43-
<script src="./chart.js"></script>
34+
<section class="statistics-container">
35+
<div id="header" class="user-information"></div>
36+
<div class="stats-and-project-wrapper">
37+
<div>
38+
<h2>SOME FANCY STATS</h2>
39+
<div
40+
class="chart-container"
41+
style="position: relative; height: 300px; width: 300px"
42+
>
43+
<canvas id="chart"></canvas>
44+
</div>
45+
</div>
46+
<div id="projects" class="project-container"></div>
47+
</div>
48+
</section>
4449

45-
</body>
46-
</html>
50+
<script src="./script.js"></script>
51+
<script src="./chart.js"></script>
52+
</body>
53+
</html>

‎code/script.js‎

Lines changed: 86 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,97 @@
11
// main fetch and function and put the DOM here
2-
const projectsContainer = document.getElementById('projects')
3-
const headerContainer = document.getElementById('header')
4-
const USER = 'DALA746'
5-
const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos`
2+
const projectsContainer = document.getElementById('projects');
3+
const headerContainer = document.getElementById('header');
4+
const USER = 'DALA746';
5+
const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos`;
66

7-
const button = document.getElementById('button')
7+
const button = document.getElementById('button');
88

9-
const getRepos = () => {
10-
fetch(ALL_MY_REPOS)
11-
.then(res => res.json())
12-
.then((json) => {
13-
console.log(json) // This json shows all of my repos on GitHub
14-
// filter repos so I can only get tehcnigos repos
15-
const forkedRepos = json.filter(repo => repo.fork && repo.name.startsWith('project-')) // or you can use includes method
16-
drawChart(forkedRepos.length)
9+
const searchProject = () => {
10+
let input = document.getElementById('searchbar').value;
11+
input = input.toLowerCase();
12+
let repo = document.getElementsByClassName('repo');
1713

18-
forkedRepos.forEach((repo) => {
19-
// header container
20-
headerContainer.innerHTML = `
21-
<div class="info-about-user">
22-
<img class="profile-img"src="${repo.owner.avatar_url}" />
23-
<h2>Darya Lapata</h2>
24-
<h3>${repo.owner.login}</h3>
25-
<p>Location: Stockholm</p>
26-
</div>
27-
`
28-
// project container
29-
projectsContainer.innerHTML += `
30-
<div class="repo">
31-
<a href="${repo.clone_url }" target="_blank"><h3>${repo.name}</h3> </a>
32-
<p id="commit-${repo.name}">Commits amount: </p>
33-
<p>Latest push update: ${ new Date(repo.pushed_at).toDateString()}</p>
34-
<p>Default branch: ${repo.default_branch}</p>
35-
</div>
36-
`
37-
})
38-
getPullRequests(forkedRepos) // passing all my forked repos to this function
39-
})
40-
}
41-
// calling getRepos function
42-
getRepos()
14+
for (i = 0; i < repo.length; i++) {
15+
if (!repo[i].innerHTML.toLowerCase().includes(input)) {
16+
repo[i].style.display = 'none';
17+
} else {
18+
repo[i].style.display = 'block';
19+
}
20+
}
21+
};
4322

44-
// GETTING ALL MY PULL REQUESTS
45-
const getPullRequests = (forkedRepos) => { // repos är samma som forkedRepos
46-
forkedRepos.forEach(repo => {
47-
// console.log(repo) // alla mina forked pull requests
48-
fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) // getting all pullrequest to the specific project
49-
.then(res => res.json())
50-
.then(data => {
51-
const myPullRequests = data.find(pull => pull.user.login === repo.owner.login) // there is a different between filter and find function, with find you get a sandwich with a name on
52-
getCommits(myPullRequests.commits_url, repo.name) // link
53-
})
54-
})
55-
}
23+
const renderHTML = (repos) => {
24+
console.log(repos);
25+
repos.forEach((repo) => {
26+
headerContainer.innerHTML = `
27+
<div class="info-about-user">
28+
<img class="profile-img"src="${repo.owner.avatar_url}" />
29+
</div>
30+
<h3>${repo.owner.login}</h3>
31+
<div>SOME STATS</div>
5632
57-
const getCommits = (url, myRepoName) => {
58-
// fetching url for commits
59-
fetch(url)
60-
.then(res => res.json())
61-
.then(data => {
62-
const numberOfCommits = data.length
63-
document.getElementById(`commit-${myRepoName}`).innerHTML += numberOfCommits
64-
})
65-
}
33+
`;
34+
projectsContainer.innerHTML += `
35+
<div class="repo">
36+
<a href="${
37+
repo.clone_url
38+
}" target="_blank"><div class="icon-container"><i class="fal fa-book" style="font-size:25px;color:var(--grey);"></i><h3>${
39+
repo.name
40+
}</h3></div> </a>
41+
<p id="commit-${repo.name}"><span class="bold">Commits amount: </span></p>
42+
<p><span class="bold">Language:</span> ${repo.language}</p>
43+
<p><span class="bold">Latest push update:</span> ${new Date(
44+
repo.pushed_at
45+
).toDateString()}</p>
46+
<p><span class="bold">Default branch:</span> ${repo.default_branch}</p>
47+
</div>
48+
`;
49+
});
50+
};
6651

52+
const getRepos = () => {
53+
fetch(ALL_MY_REPOS)
54+
.then((res) => res.json())
55+
.then((json) => {
56+
console.log(json);
57+
const forkedRepos = json.filter(
58+
(repo) => repo.fork && repo.name.startsWith('project-')
59+
);
60+
drawChart(forkedRepos.length);
61+
renderHTML(forkedRepos);
62+
// getPullRequests(forkedRepos);
63+
});
64+
};
6765

66+
getRepos();
6867

68+
// GETTING ALL MY PULL REQUESTS
69+
// const getPullRequests = (forkedRepos) => {
70+
// forkedRepos.forEach((repo) => {
71+
// fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`)
72+
// .then((res) => res.json())
73+
// .then((data) => {
74+
// console.log(data);
75+
// const myPullRequests = data.find(
76+
// (pull) => pull.user.login === repo.owner.login
77+
// );
78+
// console.log(myPullRequests, 'data');
79+
// getCommits(myPullRequests.commits_url, repo.name);
80+
// });
81+
// });
82+
// };
6983

84+
const getCommits = (url, myRepoName) => {
85+
fetch(url)
86+
.then((res) => res.json())
87+
.then((data) => {
88+
const numberOfCommits = data.length;
89+
document.getElementById(`commit-${myRepoName}`).innerHTML +=
90+
numberOfCommits;
91+
});
92+
};
7093

94+
button.addEventListener('click', (e) => {
95+
e.preventDefault();
96+
searchProject();
97+
});

0 commit comments

Comments
 (0)