Skip to content

Commit 52386ff

Browse files
author
Your name here
committed
added dark mode
1 parent 9ae6f88 commit 52386ff

4 files changed

Lines changed: 137 additions & 29 deletions

File tree

‎code/chart.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const drawChart = amount => {
1515
data: [amount, 20 - amount],
1616
backgroundColor: ["#5F939A", "#D8AC9C"],
1717
hoverOffset: 4,
18+
hoverOpacity: 1,
1819
responsive: true,
1920
maintainAspectRatio: false,
2021
},

‎code/index.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,37 @@
1212
href="https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@300&display=swap"
1313
rel="stylesheet"
1414
/>
15+
<link
16+
rel="stylesheet"
17+
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
18+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
19+
crossorigin="anonymous"
20+
/>
21+
1522
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1623
</head>
1724
<body>
18-
<h1>GitHub Tracker</h1>
25+
<header>
26+
<button class="toggleBtn" onclick="myFunction()">Toggle dark mode</button>
27+
<h1>GitHub Tracker</h1>
28+
</header>
29+
1930
<section class="grid-container">
2031
<div>
2132
<div id="profile"></div>
2233
<div class="chart"><canvas id="chart"></canvas></div>
2334
</div>
35+
2436
<fieldset>
2537
<legend>Projects</legend>
2638
<main class="project-cards" id="projects"></main>
2739
</fieldset>
2840
</section>
2941

42+
<footer>
43+
<p>TEXT</p>
44+
</footer>
45+
3046
<!-- This will be used to draw the chart 👇 -->
3147

3248
<script src="./script.js"></script>

‎code/script.js‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,17 @@ const profile = () => {
1616
.then(json => {
1717
profileInfo.innerHTML += `
1818
<img src=${json.avatar_url}>
19-
<h3>Username: ${json.login}</h3>
19+
<h3 class="username"><i class="fab fa-github"></i>
20+
21+
${json.login}</h3>
2022
<p>This account has a total of ${json.public_repos} repos</p>
2123
`;
2224
});
2325
};
2426
profile(); // invoking the profile function
2527

28+
//
29+
2630
// function to get all of the repos and commits
2731
const getRepos = () => {
2832
fetch(GITHUB_URL)
@@ -36,28 +40,32 @@ const getRepos = () => {
3640
repo => repo.fork && repo.name.startsWith("project-")
3741
);
3842

39-
// this creates a forEach function to get all of the projects and commits
43+
// this creates a forEach function to get all of the projects
4044
forkedRepos.forEach(
4145
repo =>
42-
(projectsContainer.innerHTML += `<div class="cards"><h3>Name of repo: ${
46+
(projectsContainer.innerHTML += `<div class="cards"><h3 class="repo-title">${
4347
repo.name
4448
}</h3>
45-
<p>Most recent push: ${new Date(
46-
repo.pushed_at
47-
).toDateString()} at ${repo.pushed_at.slice(11, 16)} from ${
48-
repo.default_branch
49-
} branch</p>
50-
URL: <a href=${repo.html_url}>CLICK HERE</a>
51-
52-
<p id="commit-${repo.name}">number of commits: </p></div>`)
49+
<a class="links" href=${
50+
repo.html_url
51+
}>LINK TO REPOSITORY PAGE ON GITHUB</a>
52+
<div class="push-date">
53+
<p><span class="push-title">Most recent push</span>
54+
${new Date(repo.pushed_at).toDateString()} at ${repo.pushed_at.slice(
55+
11,
56+
16
57+
)}</p>
58+
</div>
59+
<p class="branch">${repo.default_branch}</p>
60+
<p id="commit-${repo.name}">Number of commits: </p></div>`)
5361
);
5462

5563
fetchPullRequestsArray(forkedRepos);
5664
drawChart(forkedRepos.length);
5765
});
5866
};
59-
// invoking the function
6067

68+
// this fetches all of the pull requests and commit made to those
6169
const fetchPullRequestsArray = allRepositories => {
6270
allRepositories.forEach(repo => {
6371
const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
@@ -87,13 +95,10 @@ const fetchCommits = (myCommitsUrl, myRepoName) => {
8795
console.log("FETCH", fetchCommits);
8896
});
8997
};
90-
getRepos();
91-
92-
// CODE WITH MAKS
98+
getRepos(); // invoking the function
9399

94-
/* fetch commits
95-
fetchPullRequestSingle(repo) // the repo is in the forEach
96-
we place the fetchPullRequestSingle(repo) inside the forEach loop on line 50
97-
98-
https://api.github.com/repos/Technigo/${repo.name}/pulls).then(response => response.json()).then(json) => console.log(json)
99-
*/
100+
// function to toggle the dark mode
101+
const myFunction = () => {
102+
const element = document.body;
103+
element.classList.toggle("dark-mode");
104+
};

‎code/style.css‎

Lines changed: 93 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,83 @@
22
box-sizing: border-box;
33
text-align: center;
44
}
5+
/* variables to style the dark mode, add these in another variable in dark mode and add those to the selectors */
6+
:root {
7+
--borderColor: 2px solid white;
8+
--linkColor: white;
9+
--usernameColor: white;
10+
}
511

612
body {
713
background: #f9f3ec;
814
font-family: "Stick No Bills", sans-serif;
915
letter-spacing: 2px;
16+
margin: 0;
17+
}
18+
19+
.dark-mode {
20+
background: rgba(0, 0, 0, 0.8);
21+
color: white;
22+
--borderImgColor: var(--borderColor);
23+
--colorOfLink: var(--linkColor);
24+
--colorOfUsername: var(--usernameColor);
25+
}
26+
27+
.toggleBtn {
28+
border-radius: 20px;
29+
padding: 8px;
30+
cursor: pointer;
31+
}
32+
33+
.toggleBtn:hover {
34+
border: 2px solid #fff;
35+
background: #5f939a;
36+
}
37+
38+
header {
39+
background: #5f939a;
40+
padding: 10px;
41+
width: 100%;
42+
margin-bottom: 30px;
43+
text-transform: uppercase;
44+
}
45+
46+
.username {
47+
color: var(--colorOfUsername);
48+
font-size: 24px;
49+
}
50+
51+
.repo-title {
52+
text-transform: uppercase;
53+
}
54+
55+
.push-date {
56+
width: 100%;
57+
}
58+
59+
.push-title {
60+
font-weight: bold;
61+
display: block;
1062
}
1163

1264
.cards {
1365
border: 2px solid #5f939a;
14-
background-color: rgba(169, 169, 169, 0.397);
66+
background-color: rgba(169, 169, 169, 0.534);
1567
display: grid;
16-
align-items: center;
1768
width: 90%;
1869
text-align: center;
1970
margin: 10px auto;
2071
border-radius: 20px;
21-
padding: 5px 5px;
72+
padding: 0 5px;
73+
}
74+
75+
.branch {
76+
border: 2px solid black;
77+
border-radius: 30px;
78+
width: 30%;
79+
margin: auto;
80+
background: #5f939a;
81+
color: white;
2282
}
2383

2484
.grid-container {
@@ -29,27 +89,47 @@ fieldset {
2989
border: 4px solid;
3090
border-color: #5f939a;
3191
border-radius: 20px;
92+
margin: 0 10px;
3293
}
3394

3495
legend {
3596
font-size: 28px;
3697
}
3798

3899
img {
100+
border: var(--borderImgColor);
101+
width: 70%;
39102
border-radius: 50%;
40-
border: 4px solid black;
41103
}
42104
.chart {
43-
margin: auto;
105+
margin: 10px auto;
44106
height: 200px;
45107
width: 200px;
46108
}
47109

110+
.links {
111+
color: var(--colorOfLink);
112+
width: 80%;
113+
margin: auto;
114+
text-decoration: none;
115+
font-size: 12px;
116+
}
117+
118+
.links:hover {
119+
transition: all 1s;
120+
background: #5f939a;
121+
}
122+
123+
footer {
124+
background: #5f939a;
125+
padding: 10px;
126+
margin-top: 20px;
127+
}
128+
48129
/* MEDIA QUERIES */
49130

50131
@media (min-width: 768px) {
51132
.grid-container {
52-
border: 2px solid red;
53133
display: grid;
54134
grid-template-columns: 1fr 2fr;
55135
}
@@ -62,6 +142,12 @@ img {
62142
.cards {
63143
border: 2px solid #d8ac9c;
64144
display: grid;
65-
width: 100%;
145+
width: 90%;
146+
margin: 10px auto;
147+
}
148+
149+
.chart {
150+
width: 300px;
151+
height: 300px;
66152
}
67153
}

0 commit comments

Comments
 (0)