Skip to content

Commit eb11cb0

Browse files
committed
[UPDATE] index.html, style.css, main.js
Integrated GitHub API to fetch repo. details & org. members
1 parent 427ccba commit eb11cb0

3 files changed

Lines changed: 186 additions & 18 deletions

File tree

assets/css/style.css

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ body {
3232
display: flex;
3333
min-height: 100vh;
3434
flex-direction: column;
35-
/* background-image: url(../img/bg-1.jpeg); */
35+
background-image: url(../img/bg-1.jpeg);
3636
/* background-image: linear-gradient(to top right, rgba(255, 0, 255, 0.2), rgba(255, 0, 0, 0.1)); */
3737
}
3838

@@ -70,6 +70,7 @@ main {
7070

7171
ul.tabs {
7272
display: flex;
73+
border-radius: 4px;
7374
}
7475

7576
li.tab {
@@ -91,11 +92,35 @@ li.tab {
9192

9293
.tabs .indicator {
9394
background-color: #b71c1c;
95+
padding: 2px;
96+
border-radius: 2px;
97+
}
98+
99+
ul.collapsible {
100+
border-radius: 3px;
101+
}
102+
103+
ul.collapsible .collapsible-body {
104+
background: #eeeeee;
105+
}
106+
107+
.scale-card {
108+
transition: all 0.3s ease;
109+
}
110+
111+
.scale-card:hover {
112+
transform: scale(1.05);
94113
}
95114

96115
.team-img {
97116
width: 128px;
98117
height: 128px;
118+
margin: 5px;
119+
transition: all 0.3s ease;
120+
}
121+
122+
.team-img:hover {
123+
transform: scale(1.2);
99124
}
100125

101126
.footer-container {

assets/js/main.js

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,161 @@
1+
class localStorage {
2+
constructor() {
3+
if (typeof(Storage) === "undefined") {
4+
this.state = false;
5+
} else {
6+
this.state = true;
7+
}
8+
}
9+
10+
getState() {
11+
return this.state;
12+
}
13+
14+
setKey(key, data) {
15+
if (this.getState()) {
16+
window.localStorage.setItem(key, data);
17+
}
18+
}
19+
20+
getKey(key) {
21+
if (this.getState()) {
22+
return window.localStorage.getItem(key);
23+
}
24+
}
25+
26+
removeKey(key) {
27+
if (this.getState()) {
28+
window.localStorage.removeItem(key);
29+
}
30+
}
31+
32+
clearAll() {
33+
window.localStorage.clear();
34+
}
35+
}
36+
37+
let ls = new localStorage();
38+
139
$(document).ready(function(){
240
$(".sidenav").sidenav();
341
$(".tabs").tabs();
442
$(".collapsible").collapsible();
543
$(".tooltipped").tooltip();
44+
45+
fetchRepos();
46+
fetchTeam();
647
});
48+
49+
function fetchRepos(force = false) {
50+
fetch("https://api.github.com/orgs/devCANS/repos", {
51+
headers: {
52+
"Accept": "application/vnd.github.v3+json",
53+
"If-None-Match": ls.getKey("repo-etag")
54+
}
55+
})
56+
.then(
57+
function(response) {
58+
if (response.status !== 200) {
59+
console.log("[FETCH Repo] Request failed!. Status Code: " + response.status);
60+
return;
61+
}
62+
63+
response.json().then(function(data) {
64+
try {
65+
ls.setKey("repo-etag", response.headers.get("etag"));
66+
} catch (e) {
67+
console.log("[FETCH Repo] ETag Missing");
68+
}
69+
70+
updateRepos(data);
71+
});
72+
}
73+
)
74+
.catch(function(err) {
75+
console.log("[FETCH Repo] Fetch Error!", err);
76+
});
77+
}
78+
79+
function updateRepos(data) {
80+
data.forEach(function(i) {
81+
let outerDiv = createElement("div", {class: "card z-depth-1 scale-card"});
82+
let div1 = createElement("div", {class: "card-content black-text"});
83+
div1.append(createElement("span", {class: "card-title"}, i.full_name));
84+
div1.append(createElement("p", {}, i.description));
85+
let d = new Date(i.updated_at);
86+
lastUpdated = formatDate(d.getDay()) + "-" + formatDate((d.getMonth() + 1)) + "-" + formatDate(d.getFullYear()) + ", " + formatDate(d.getHours()) + ":" + formatDate(d.getMinutes());
87+
div1.append(createElement("p", {}, "<b>Last Updated:</b> " + lastUpdated))
88+
let div2 = createElement("div", {class: "card-action"});
89+
div2.append(createElement("a", {href: i.html_url}, "View on GitHub"));
90+
outerDiv.append(div1);
91+
outerDiv.append(div2);
92+
$("#repo").append(outerDiv);
93+
});
94+
}
95+
96+
function fetchTeam(force = false) {
97+
fetch("https://api.github.com/orgs/devCANS/members", {
98+
headers: {
99+
"Accept": "application/vnd.github.v3+json",
100+
"If-None-Match": ls.getKey("team-etag")
101+
}
102+
})
103+
.then(
104+
function(response) {
105+
if (response.status !== 200) {
106+
console.log("[FETCH Team] Request failed!. Status Code: " + response.status);
107+
return;
108+
}
109+
110+
response.json().then(function(data) {
111+
try {
112+
ls.setKey("team-etag", response.headers.get("etag"));
113+
} catch (e) {
114+
console.log("[FETCH Team] ETag Missing");
115+
}
116+
117+
updateTeam(data);
118+
});
119+
}
120+
)
121+
.catch(function(err) {
122+
console.log("[FETCH Team] Fetch Error!", err);
123+
});
124+
}
125+
126+
function updateTeam(data) {
127+
let container = $("#team").find(".card-content");
128+
data.forEach(function(i) {
129+
let anchor = createElement("a", {href: i.html_url, target: "_blank"});
130+
anchor.append(createElement("img", {class: "circle team-img tooltipped", src: i.avatar_url, "data-tooltip": i.login}));
131+
container.append(anchor);
132+
});
133+
$(".tooltipped").tooltip();
134+
}
135+
136+
function createElement(tag, options = {}, html = "") {
137+
let e = document.createElement(tag);
138+
139+
for (const attr in options) {
140+
$(e).attr(attr, options[attr]);
141+
}
142+
143+
if (html != "") {
144+
$(e).html(html);
145+
}
146+
return e;
147+
}
148+
149+
function getMaterialIcon(icon, addClasses = "", DOMElement = true) {
150+
if (DOMElement) {
151+
return createElement("i", {class: "material-icons " + addClasses}, icon);
152+
}
153+
return "<i class='material-icons " + addClasses + "'>" + icon + "</i>";
154+
}
155+
156+
function formatDate(data) {
157+
if (Number(data) < 10) {
158+
return "0" + data;
159+
}
160+
return data;
161+
}

index.html

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
<main class="container">
3838
<div class="row center-align">
39-
<h1 class="tooltipped" data-position="top" data-tooltip="Styles/Animations/Effects to be added">DevCANS</h1>
39+
<h1 class="tooltipped white-text" data-position="top" data-tooltip="Styles/Animations/Effects to be added">DevCANS</h1>
4040
</div>
4141
<div class="row">
4242
<div class="col s12" style="margin-bottom: 2em;">
@@ -48,7 +48,7 @@ <h1 class="tooltipped" data-position="top" data-tooltip="Styles/Animations/Effec
4848
</div>
4949
<div id="overview" class="col s12">
5050
<ul class="collapsible">
51-
<li>
51+
<li class="active">
5252
<div class="collapsible-header"><i class="material-icons">filter_1</i>Goal</div>
5353
<div class="collapsible-body">Our goal is to .....</div>
5454
</li>
@@ -63,24 +63,12 @@ <h1 class="tooltipped" data-position="top" data-tooltip="Styles/Animations/Effec
6363
</ul>
6464
</div>
6565
<div id="repo" class="col s12">
66-
<div class="card z-depth-1">
67-
<div class="card-content black-text">
68-
<span class="card-title">Collection of Repos.</span>
69-
<p>Little Info.</p>
70-
</div>
71-
<div class="card-action">
72-
<a href="#">GitHub Link</a>
73-
</div>
74-
</div>
66+
7567
</div>
7668
<div id="team" class="col s12">
7769
<div class="card z-depth-1">
78-
<div class="card-content black-text">
79-
<img class="circle team-img tooltipped" src="assets/img/member-1.jpg" data-tooltip="Prince Raj">
80-
<img class="circle team-img tooltipped" src="assets/img/member-2.png" data-tooltip="Member 2">
81-
<img class="circle team-img tooltipped" src="assets/img/member-3.png" data-tooltip="Member 3">
82-
<img class="circle team-img tooltipped" src="assets/img/member-4.png" data-tooltip="Member 4">
83-
&nbsp; <b>....</b>
70+
<div class="card-content black-text center-align">
71+
8472
</div>
8573
</div>
8674
</div>

0 commit comments

Comments
 (0)