Skip to content

Commit 2f52877

Browse files
joannaringqvistjoannaringqvist
committed
Styled header and main. Added table with data from the API
1 parent ded93a5 commit 2f52877

3 files changed

Lines changed: 136 additions & 6 deletions

File tree

‎code/index.html‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,41 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
10+
711
<title>Project GitHub Tracker</title>
812
<link rel="stylesheet" href="./style.css" />
913
</head>
1014
<body>
11-
<h1>GitHub Tracker</h1>
12-
<h2>Projects:</h2>
13-
<main id="projects"></main>
15+
<header>
16+
<h1 class="heading">GitHub Tracker for:</h1>
17+
<div class="user">
18+
<p class="username" id="username"></p>
19+
<img id="picture" class="picture" />
20+
</div>
21+
</header>
22+
23+
<main>
24+
<table class="projects">
25+
<thead>
26+
<tr>
27+
<td>Repo name</td>
28+
<td>Updated at</td>
29+
<td>Default branch</td>
30+
<td>URL</td>
31+
</tr>
32+
</thead>
33+
<tbody id="projects">
34+
</tbody>
35+
</table>
36+
</main>
1437

1538
<!-- This will be used to draw the chart 👇 -->
1639
<canvas id="chart"></canvas>
1740

1841
<script src="./script.js"></script>
1942
<script src="./chart.js"></script>
2043
</body>
21-
</html>
44+
</html>

‎code/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const owner = 'joannaringqvist';
2+
const API_URL_USERNAME = `https://api.github.com/users/${owner}`;
3+
const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`;
4+
const projects = document.getElementById('projects');
5+
const username = document.getElementById('username');
6+
const picture = document.getElementById('picture');
7+
8+
fetch(API_URL_REPOS)
9+
.then((response) => {
10+
return response.json()
11+
})
12+
.then((json) => {
13+
console.log(json);
14+
15+
username.innerHTML = json[0].owner.login;
16+
picture.src = json[0].owner.avatar_url;
17+
18+
json.forEach((repo) => {
19+
20+
if (repo.fork === true && repo.name.startsWith('project')) {
21+
projects.innerHTML += `<tr><td>${repo.name}</td><td>${repo.updated_at}</td><td>${repo.default_branch}</td><td>${repo.url}</td></tr>`
22+
}
23+
});
24+
})

‎code/style.css‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,86 @@
11
body {
2-
background: #FFECE9;
3-
}
2+
margin: 0;
3+
font-family: 'Roboto', sans-serif;
4+
padding: 2rem 1rem;
5+
}
6+
7+
/* --- HEADER --- */
8+
.user {
9+
display: flex;
10+
}
11+
12+
h1 {
13+
text-transform: uppercase;
14+
font-size: 0.9rem;
15+
font-weight: 300;
16+
color: #888;
17+
margin: 0;
18+
}
19+
20+
.heading {
21+
align-self: flex-start;
22+
}
23+
24+
.username {
25+
align-self: center;
26+
margin: 0 0.5rem 0 0;
27+
font-size: 2.2rem;
28+
}
29+
30+
.picture {
31+
border-radius: 50%;
32+
height: 13vw;
33+
}
34+
35+
/* --- MAIN --- */
36+
main {
37+
padding: 2rem 0;
38+
}
39+
40+
.projects {
41+
overflow: auto;
42+
white-space: nowrap;
43+
}
44+
45+
table {
46+
width: 100%;
47+
border-collapse: collapse;
48+
}
49+
50+
thead {
51+
font-weight: 700;
52+
color: #888;
53+
}
54+
55+
tr {
56+
border: 1px solid black;
57+
}
58+
59+
td {
60+
padding: 0.3rem 1rem;
61+
border: 1px solid rgb(202, 202, 202);
62+
}
63+
64+
/* --- Desktop --- */
65+
@media screen and (min-width:768px) {
66+
67+
h1 {
68+
font-size: 1.5rem;
69+
}
70+
71+
header {
72+
display: flex;
73+
justify-content: space-between;
74+
}
75+
76+
.heading {
77+
align-self: flex-start;
78+
}
79+
80+
.username {
81+
align-self: center;
82+
margin: 0 1rem 0 1.3rem;
83+
font-size: 2.5rem;
84+
}
85+
86+
}

0 commit comments

Comments
 (0)