Skip to content

Commit 2879bd1

Browse files
author
Katarina Elgerus
committed
styling added
1 parent c874af1 commit 2879bd1

5 files changed

Lines changed: 91 additions & 19 deletions

File tree

‎code/GitHubMark.png‎

2.28 KB
Loading

‎code/chart.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,31 @@
22
const ctx = document.getElementById('chart').getContext('2d')
33

44
//"Draw" the chart here 👇
5+
const drawChart = (repos) => {
6+
7+
const labels = [
8+
'Completed projects',
9+
'Remaining projects',
10+
11+
];
12+
13+
const data = {
14+
labels: labels,
15+
datasets: [{
16+
label: 'My First dataset',
17+
backgroundColor: ['#A9C9FF', '#fde3fb'],
18+
borderColor:'pink',
19+
data: [repos, 19-repos],
20+
}]
21+
};
22+
23+
const config = {
24+
type: 'pie',
25+
data: data,
26+
};
27+
28+
const myChart = new Chart(
29+
document.getElementById('chart'),
30+
config
31+
);
32+
}

‎code/index.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,21 @@
88
<link rel="stylesheet" href="./style.css" />
99
</head>
1010
<body>
11+
1112
<h1>GitHub Tracker</h1>
13+
<div class="intro">
1214
<img class="picture" id="avatar"></img>
13-
<p id="full-name"></p>
14-
<p id="githubname"></p>
15-
<h2>Projects:</h2>
15+
<section class="userinfo" id="userinfo"></section>
16+
</div>
17+
<h1>Projects:</h1>
18+
1619
<main id="projects" class ="projects"></main>
1720

18-
<div id="projects2" class ="projects"></main>
21+
1922
<!-- This will be used to draw the chart 👇 -->
20-
<canvas id="chart"></canvas>
21-
23+
<canvas id="chart" class="chart"></canvas>
24+
</div>
25+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2226
<script src="./script.js"></script>
2327
<script src="./chart.js"></script>
2428
</body>

‎code/script.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const avatar = document.getElementById('avatar')
2-
const fullName = document.getElementById('full-name')
3-
const githubname = document.getElementById('githubname')
2+
//const fullName = document.getElementById('full-name')
3+
//const githubname = document.getElementById('githubname')
44
const projects = document.getElementById('projects')
5-
const projects2 = document.getElementById('projects2')
5+
const userInfo = document.getElementById('userinfo')
66
const username = 'Katarina821'
77
let repoName
88

@@ -17,8 +17,8 @@ fetch(API_URL_ID)
1717
console.log(data.login)
1818
console.log(data.avatar_url)
1919
console.log(data.name)
20-
fullName.innerHTML = `Name: ${data.name}.`
21-
githubname.innerHTML = `Username: ${data.login}`
20+
userInfo.innerHTML = `<h2>Name: ${data.name}</h2> <h2>Username: ${data.login}</h2>`
21+
//githubname.innerHTML = ``
2222
avatar.src = data.avatar_url
2323
getRepos()
2424
})
@@ -35,17 +35,20 @@ const getRepos = () => {
3535
console.log(forkedRepos)
3636

3737
forkedRepos.forEach((repo)=>projects.innerHTML+=`
38-
39-
<div class="repo">
40-
<a href="${repo.html_url}"><h2>${repo.name }</h2></a>
41-
<h3>Defaultbranch ${repo.default_branch}</h3>
38+
39+
<div class="repo">
40+
<img class="logo"src="./GitHubMark.png">
41+
<a href="${repo.html_url}"><h3>${repo.name }</h3></a>
42+
<h4>Defaultbranch ${repo.default_branch}</h4>
4243
<p> Most resent update: ${new Date(repo.updated_at).toLocaleDateString("en-UK")}</p>
4344
<p id="${repo.name}">Commits amount: </p>
45+
4446
</div>
4547
4648
`)
4749

4850
getPullRequests(forkedRepos)
51+
drawChart(forkedRepos.length)
4952
})
5053
}
5154

‎code/style.css‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,45 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Roboto:wght@300&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
3+
*{box-sizing: border-box;}
4+
15
body {
2-
background: #FFECE9;
6+
background-repeat: no-repeat;
7+
background-attachment: fixed;
8+
background-color: #A9C9FF;
9+
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
10+
font-family: 'Oswald', sans-serif;
311
}
4-
5-
.repo{border:2px solid black; padding:20px; margin:30px}
12+
.intro{width:80%; margin:auto; text-align:center}
13+
h1{font-size: 70px; text-align: center;}
14+
h2{text-align:center}
15+
.repo{width:80%; margin:auto; background-color:#fde3fb; border:1px solid white; padding:20px; margin:30px; border-radius:5%}
616
.projects{display:flex; flex-wrap: wrap;}
17+
718
a{text-decoration:none;}
8-
.picture{width:20%; border-radius:50% ;}
19+
h3{font-size: 30px;}
20+
h3:hover{color:rgb(141, 190, 233);font-family: 'Bebas Neue', cursive;;}
21+
22+
.picture{width:80%; border-radius:50%;}
23+
24+
.logo{width:30px;}
25+
.chart{ position: absolute;
26+
left: 0;
27+
right: 0;
28+
margin:auto;
29+
width: auto}
30+
.userinfo{padding:40px;}
31+
32+
33+
@media only screen and (min-width: 992px) {
34+
.repo{width:20%}
35+
.picture{width:20%;}
36+
.intro{display:flex; align-items:center; justify-content: center;}
37+
h2{font-size:35px; text-align:left; margin-left:10px;}
38+
.chart{ position: absolute;
39+
left: 0;
40+
right: 0;
41+
margin:auto;
42+
width: 40%
43+
44+
}}
45+

0 commit comments

Comments
 (0)