forked from RaidAndFade/HacktoberChallenges2018
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (87 loc) · 3.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
<head>
<title>RaidAndFade's Friends</title>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#mainContent { background: white; max-width: 660px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px;}
#mainContent h2 { color: #ffa100; font-weight: bold; font-size: 28px; margin: 0 0 16px; text-align: center;}
#mainContent h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#mainContent p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#mainContent a { display: inline-block; text-align: center; text-decoration: none; padding: 8px; border-radius: 4px; font-size: 20px; color:black;}
#mainContent { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#logo { width:50%; }
@media (max-width: 600px) {
body, #mainContent { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
#logo{
width: 50%;
}
}
.someGap{
margin: 0 0 75px;
}
.githubButtons{
text-align: center;
}
.contentFooter{
text-align: center;
}
.contentFooterSmily{
color: black;
fill: orange;
font-size: 30px;
text-shadow: #ffa100;
}
</style>
</head>
<body>
<!-- Main Content of Body -->
<div id="mainContent">
<span style="font-size:3em;width:100%;text-align:center;display:inline-block"> Welcome to my Friends List <br> <span style="font-size:0.5em;">Week 1 Challenge</span> </span>
<div class="someGap"></div>
<!-- Github Buttons -->
<div class="githubButtons">
<!-- Follow RaidAndFade -->
<a class="github-button" href="https://github.com/RaidAndFade" data-size="large" data-show-count="true" aria-label="Follow @RaidAndFade on GitHub">Follow @RaidAndFade</a>
<!-- Fork Repo. -->
<span id="friends"><a class="github-button" href="https://github.com/RaidAndFade/Hacktoberfest2018/blob/master/README.md" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Add yourself to the list of friends!">Become a friend!</a></span>
</div>
<hr>
<h3> Here are <span id="fc"></span>my friends: </h3>
<!-- User Files | Contribution File's Links -->
<ol id="d">
<li>Loading...</li>
</ol>
<!-- Content Footer -->
<hr>
<div class="contentFooter">
<a href="https://hacktoberfest.digitalocean.com"><img id="logo" src="https://i.imgur.com/d08lZt8.png"></a><br>
<p>Thanks for being a part of Hacktoberfest 2018</p>
<p>You're Awesome! <i class="contentFooterSmily">☺</i></p>
</div>
<!-- Content Footer End -->
</div>
</body>
</html>
<script>
function setList(l){
document.getElementById("fc").innerHTML=l.length+" of "
var h = document.getElementById("d");
h.innerHTML = "";
for(var x of l){
h.innerHTML += "<li><a href=\""+x.path+"\">"+x.name+"</a></li>";
}
}
const gitapiurl = "https://api.github.com/repos/raidandfade/hacktoberfest2018/contents/Friends";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
setList(JSON.parse(this.responseText))
}
};
xhttp.open("GET", gitapiurl, true);
xhttp.send();
</script>