Skip to content

Commit 7dda067

Browse files
A1eksaA1eksa
committed
css, fixed pull requests
1 parent f4b042c commit 7dda067

4 files changed

Lines changed: 89 additions & 37 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎code/index.html‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,25 @@
99
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1010
</head>
1111
<body>
12-
<header class="header__container">
12+
<header class="header-container">
1313

1414
<image class="octocat" src="./github.png"></image>
1515
<h1>GitHub Tracker</h1>
1616
</header>
17-
<div id="userInfo" class="user-info"></div>
18-
<button id= "Btn"></button>
19-
20-
<main id="projects" class="container">
21-
<table>
22-
<tr>
23-
<td"></td>
24-
</tr>
25-
</table>
26-
</main>
17+
<div class="media">
18+
<div class="left-content">
19+
<div id="userInfo" class="user-info"></div>
20+
<div class="chart">
21+
<canvas id="chart"></canvas>
22+
</div>
23+
</div>
24+
25+
<main id="projects" class="project-container">
26+
</main>
27+
</div>
2728

2829
<!-- This will be used to draw the chart 👇 -->
29-
<canvas id="chart"></canvas>
30+
3031

3132
<script src="./script.js"></script>
3233
<script src="./chart.js"></script>

‎code/script.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,19 @@ const getUserPicture = ()=> {
1515
const url = data.followers_url;
1616
const button = document.getElementById("Btn")
1717

18-
button.onclick = ()=>{
19-
window.location='data.followers_url'
20-
21-
}
18+
2219

2320

24-
userInfo.innerHTML = `
25-
<img class="user-info_picture" src="${picture}" alt="Picture of gitHub user"/>
26-
<div class="user-info_username">User name: ${username}</div>
27-
<div class="user-info_location">Location: ${location}</div>
28-
<div class="user-info_bio">${userBio} 🐒</div>
21+
userInfo.innerHTML += `
22+
23+
<img class="user-info_picture" src="${picture}" alt="Picture of gitHub user"/>
24+
<div class="user-info_username">User name: ${username}</div>
25+
<div class="user-info_location">Location: ${location}</div>
26+
<div class="user-info_bio">${userBio} 🐒</div>
27+
`
2928

3029

31-
`
30+
3231
})
3332
}
3433
getUserPicture()
@@ -42,18 +41,21 @@ const fetchRepo = ()=> {
4241
const technigoRepo = data.filter(repo =>
4342
repo.name.includes('project-') && repo.fork
4443
);
45-
console.log(technigoRepo);
44+
//console.log(technigoRepo);
4645

4746
technigoRepo.forEach((repo)=> {
4847
projectsContainer.innerHTML += `
49-
<div>PROJECT: ${repo.name}</div>
50-
<div>default branch:${repo.default_branch}</div>
51-
<div>url:${repo.html_url}</div>
52-
<a href="${repo.html_url}" target="_blank">Go to "${repo.name}"</a>
53-
<div>most recent push:"${repo.pushed_at}"`
48+
49+
<div class="repo-card">
50+
<div>PROJECT: ${repo.name}</div>
51+
<div>default branch:${repo.default_branch}</div>
52+
<a href="${repo.html_url}" target="_blank">Go to "${repo.name}"</a>
53+
<div>most recent push:"${repo.pushed_at}"
54+
`
5455
});
5556
fetchPull(technigoRepo);
5657

58+
5759
});
5860

5961

@@ -66,10 +68,10 @@ const fetchPull = (allRepo)=> {
6668
fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`)
6769
.then((res)=> res.json())
6870
.then((data)=>{
69-
console.log(`mother${repo.name}, data`);
71+
console.log("aleksa", data);
7072

7173
});
72-
fetchPull()
74+
7375

7476

7577
});

‎code/style.css‎

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,74 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
15
body {
26
background: rgb(105, 104, 104);
37
}
4-
#chart {
8+
9+
.header-container {
10+
display: flex;
11+
flex-direction: row;
12+
}
13+
a {
14+
color: beige;
15+
}
16+
17+
.repo-card {
18+
border: coral solid 1px;
19+
}
20+
21+
.chart {
522
border: black solid;
6-
position: absolute;
23+
724
padding: 40px;
8-
aspect-ratio: 300px;
25+
width: 40%;
926
}
27+
1028
.user-info_picture {
1129
border-radius: 50%;
30+
width: 40%;
1231
}
32+
1333
.user-info {
14-
font-size: 40pxß;
15-
}
16-
.header-container {
17-
position: relative;
34+
font-size: 15px;
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
1838
}
39+
1940
.octocat {
2041
height: 50px;
2142
}
2243

44+
@media (min-width: 768px) and(max-width: 991px) {
45+
.project-container {
46+
display: grid;
47+
grid-template-columns: 1fr 1fr;
48+
}
49+
.repo-card {
50+
max-width: 100px;
51+
}
52+
}
53+
@media (min-width: 991px) {
54+
.media {
55+
display: flex;
56+
flex-direction: row;
57+
width: 30%;
58+
}
59+
.project-container {
60+
display: grid;
61+
grid-template-columns: 1fr 1fr;
62+
}
63+
64+
.user-info {
65+
font-size: 15px;
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
}
70+
}
71+
2372
/*.background-image {
2473
position: absolute;
2574
object-fit: cover;

0 commit comments

Comments
 (0)