html
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
<!DOCTYPE html>
<html>
<head>
<title>Sololearner's Character</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<h1>Sololearner's Character</h1>
<div id="output">
<table id="table">
<tr>
<th>Name</th>
<th>Characters</th>
</tr>
</table>
<button class='add'>Add to list</button>
</div>
<div class="notice"></div>
<form id='add'>
<input type="text" name="name" placeholder="username" />
<input type="url" name="url" placeholder="profile url" />
<br/>
<input type="checkbox" name="badge" value="Exclusive"> Exclusive
<input type="checkbox" name="badge" value="Good Questioner"> Good Questioner
<input type="checkbox" name="badge" value="Good Answerer"> Good Answerer <br/>
<input type="checkbox" name="badge" value="Helper"> Helper
<input type="checkbox" name="badge" value="Champion"> Champion
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
background-color: #fffafa;
width:100%;
}
#add{
display: none;
}
#output{
width:100%;
}
table{
border: 1px solid grey;
width:100%;
}
th,td{
border: 1px solid black;
padding:5px;
}
tr:nth-child(even){
background-color: #def;
}
tr:hover{
background-color: #abc;
cursor: pointer;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
window.onload = function(){
var arr = [];
//print on page
$.getJSON('https://jsonblob.com/api/jsonBlob/c36fccd1-2f81-11e7-ae4c-63424d4e5781',function(res){}).done(function(res){
$(".notice").html("Loading...please wait<br/> ");
for(var user in res.users){var userArr = [];userArr.push(user);
for(var i = 0; i < res.users[user].length; i++){userArr.push(res.users[user][i]);}arr.push(userArr)}
$(".notice").html("");
for(var i = 0; i < arr.length; i++){var td = "<td><a href='"+arr[i][1]+"'>"+arr[i][0]+"</a></td>";char = "<td>"+arr[i].slice(2)+"</td>";$("#table").append("<tr>"+td+char+"</tr>");}});
$('.add').click(function(){
$("#add").show("slow");
$(this).hide('fast');
});
$("#add").submit(function(e){
e.preventDefault();
var toAdd = [],
badge = $("input[name='badge']:checked").map(function(){
return this.value;
}).get(),
name = $('input')[0].value,
url = $('input')[1].value;
if(name.length && url.length && badge.length){
toAdd.push(name), toAdd.push(url), toAdd.push(badge.join(", "));
arr.push(toAdd);
var solos = {users:{}};
for(var i = 0; i < arr.length; i++){
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run