JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div id="whoLead"></div>
<body>
<table class="tableContainer">
<tr class="headings">
<th>
<h1>LEADERBOARD</h1></th>
</tr>
</table>
<table class="tableContainer">
<tr class="headings">
<th>Ranking</th>
<th class="col2">Camper Name</th>
<th id="state1"><a href="#">Points In the Last 30 Days<a/></th>
<th id="state2"><a href="#">All Time Points</a></th>
</tr>
<tr class="tableData">
<td>1</td>
<td id="username1"></td>
<td id="recent1"></td>
<td id="total1"></td>
</tr>
<tr class="tableData">
<td>2</td>
<td id="username2"></td>
<td id="recent2"></td>
<td id="total2"></td>
</tr>
<tr class="tableData">
<td>3</td>
<td id="username3"></td>
<td id="recent3"></td>
<td id="total3"></td>
</tr>
<tr class="tableData">
<td>4</td>
<td id="username4"></td>
<td id="recent4"></td>
<td id="total4"></td>
</tr>
<tr class="tableData">
<td>5</td>
<td id="username5"></td>
<td id="recent5"></td>
<td id="total5"></td>
</tr>
<tr class="tableData">
<td>6</td>
<td id="username6"></td>
<td id="recent6"></td>
<td id="total6"></td>
</tr>
<tr class="tableData">
<td>7</td>
<td id="username7"></td>
<td id="recent7"></td>
<td id="total7"></td>
</tr>
<tr class="tableData">
<td>8</td>
<td id="username8"></td>
<td id="recent8"></td>
<td id="total8"></td>
</tr>
<tr class="tableData">
<td>9</td>
<td id="username9"></td>
<td id="recent9"></td>
<td id="total9"></td>
</tr>
<tr class="tableData">
<td>10</td>
<td id="username10"></td>
<td id="recent10"></td>
<td id="total10"></td>
</tr>
<tr class="tableData">
<td>11</td>
<td id="username11"></td>
<td id="recent11"></td>
<td id="total11"></td>
</tr>
<tr class="tableData">
<td>12</td>
<td id="username12"></td>
<td id="recent12"></td>
<td id="total12"></td>
</tr>
<tr class="tableData">
<td>13</td>
<td id="username13"></td>
<td id="recent13"></td>
<td id="total13"></td>
</tr>
<tr class="tableData">
<td>14</td>
<td id="username14"></td>
<td id="recent14"></td>
<td id="total14"></td>
</tr>
<tr class="tableData">
<td>15</td>
<td id="username15"></td>
<td id="recent15"></td>
<td id="total15"></td>
</tr>
<tr class="tableData">
<td>16</td>
<td id="username16"></td>
<td id="recent16"></td>
<td id="total16"></td>
</tr>
<tr class="tableData">
<td>17</td>
<td id="username17"></td>
<td id="recent17"></td>
<td id="total7"></td>
</tr>
<tr class="tableData">
<td>18</td>
<td id="username18"></td>
<td id="recent18"></td>
<td id="total18"></td>
</tr>
<tr class="tableData">
<td>19</td>
<td id="username19"></td>
<td id="recent19"></td>
<td id="total19"></td>
</tr>
<tr class="tableData">
<td>20</td>
<td id="username20"></td>
<td id="recent20"></td>
<td id="total20"></td>
</tr>
<tr class="tableData">
<td>21</td>
<td id="username21"></td>
<td id="recent21"></td>
<td id="total21"></td>
</tr>
<tr class="tableData">
<td>22</td>
<td id="username22"></td>
<td id="recent22"></td>
<td id="total22"></td>
</tr>
<tr class="tableData">
<td>23</td>
<td id="username23"></td>
<td id="recent23"></td>
<td id="total23"></td>
</tr>
<tr class="tableData">
<td>24</td>
<td id="username24"></td>
<td id="recent24"></td>
<td id="tota24"></td>
</tr>
<tr class="tableData">
<td>25</td>
<td id="username25"></td>
<td id="recent25"></td>
<td id="total25"></td>
</tr>
<tr class="tableData">
<td>26</td>
<td id="username26"></td>
<td id="recent26"></td>
<td id="total26"></td>
</tr>
<tr class="tableData">
<td>27</td>
<td id="username27"></td>
<td id="recent27"></td>
<td id="total27"></td>
</tr>
<tr class="tableData">
<td>28</td>
<td id="username28"></td>
<td id="recent28"></td>
<td id="total28"></td>
</tr>
<tr class="tableData">
<td>29</td>
<td id="username29"></td>
<td id="recent29"></td>
<td id="total29"></td>
</tr>
<tr class="tableData">
<td>30</td>
<td id="username30"></td>
<td id="recent30"></td>
<td id="total30"></td>
</tr>
<tr class="tableData">
<td>31</td>
<td id="username31"></td>
<td id="recent31"></td>
<td id="total31"></td>
</tr>
<tr class="tableData">
<td>32</td>
<td id="username32"></td>
<td id="recent32"></td>
<td id="total32"></td>
</tr>
<tr class="tableData">
<td>33</td>
<td id="username33"></td>
<td id="recent33"></td>
<td id="total33"></td>
</tr>
<tr class="tableData">
<td>34</td>
<td id="username34"></td>
<td id="recent34"></td>
<td id="total34"></td>
</tr>
<tr class="tableData">
<td>35</td>
<td id="username35"></td>
<td id="recent35"></td>
<td id="total35"></td>
</tr>
<tr class="tableData">
<td>36</td>
<td id="username36"></td>
<td id="recent36"></td>
<td id="total36"></td>
</tr>
<tr class="tableData">
<td>37</td>
<td id="username37"></td>
<td id="recent37"></td>
<td id="total37"></td>
</tr>
<tr class="tableData">
<td>38</td>
<td id="username38"></td>
<td id="recent38"></td>
<td id="total38"></td>
</tr>
<tr class="tableData">
<td>39</td>
<td id="username39"></td>
<td id="recent39"></td>
<td id="total39"></td>
</tr>
<tr class="tableData">
<td>40</td>
<td id="username40"></td>
<td id="recent40"></td>
<td id="total40"></td>
</tr>
<tr class="tableData">
<td>41</td>
<td id="username41"></td>
<td id="recent41"></td>
<td id="total41"></td>
</tr>
<tr class="tableData">
<td>42</td>
<td id="username42"></td>
<td id="recent42"></td>
<td id="total42"></td>
</tr>
<tr class="tableData">
<td>43</td>
<td id="username43"></td>
<td id="recent43"></td>
<td id="total43"></td>
</tr>
<tr class="tableData">
<td>44</td>
<td id="username44"></td>
<td id="recent44"></td>
<td id="total44"></td>
</tr>
<tr class="tableData">
<td>45</td>
<td id="username45"></td>
<td id="recent45"></td>
<td id="total45"></td>
</tr>
<tr class="tableData">
<td>46</td>
<td id="username46"></td>
<td id="recent46"></td>
<td id="total46"></td>
</tr>
<tr class="tableData">
<td>47</td>
<td id="username47"></td>
<td id="recent47"></td>
<td id="total47"></td>
</tr>
<tr class="tableData">
<td>48</td>
<td id="username48"></td>
<td id="recent48"></td>
<td id="total48"></td>
</tr>
<tr class="tableData">
<td>49</td>
<td id="username49"></td>
<td id="recent49"></td>
<td id="total49"></td>
</tr>
<tr class="tableData">
<td>50</td>
<td id="username50"></td>
<td id="recent50"></td>
<td id="total50"></td>
</tr>
<tr class="tableData">
<td>51</td>
<td id="username51"></td>
<td id="recent51"></td>
<td id="total51"></td>
</tr>
<tr class="tableData">
<td>52</td>
<td id="username52"></td>
<td id="recent52"></td>
<td id="total52"></td>
</tr>
<tr class="tableData">
<td>53</td>
<td id="username53"></td>
<td id="recent53"></td>
<td id="total53"></td>
</tr>
<tr class="tableData">
<td>54</td>
<td id="username54"></td>
<td id="recent54"></td>
<td id="total54"></td>
</tr>
<tr class="tableData">
<td>55</td>
<td id="username55"></td>
<td id="recent55"></td>
<td id="total55"></td>
</tr>
<tr class="tableData">
<td>56</td>
<td id="username56"></td>
<td id="recent56"></td>
<td id="total56"></td>
</tr>
<tr class="tableData">
<td>57</td>
<td id="username57"></td>
<td id="recent57"></td>
<td id="total57"></td>
</tr>
<tr class="tableData">
<td>58</td>
<td id="username58"></td>
<td id="recent58"></td>
<td id="total58"></td>
</tr>
<tr class="tableData">
<td>59</td>
<td id="username59"></td>
<td id="recent59"></td>
<td id="total59"></td>
</tr>
<tr class="tableData">
<td>60</td>
<td id="username60"></td>
<td id="recent60"></td>
<td id="total60"></td>
</tr>
<tr class="tableData">
<td>61</td>
<td id="username61"></td>
<td id="recent61"></td>
<td id="total61"></td>
</tr>
<tr class="tableData">
<td>62</td>
<td id="username62"></td>
<td id="recent62"></td>
<td id="total62"></td>
</tr>
<tr class="tableData">
<td>63</td>
<td id="username63"></td>
<td id="recent63"></td>
<td id="total63"></td>
</tr>
<tr class="tableData">
<td>64</td>
<td id="username64"></td>
<td id="recent64"></td>
<td id="total64"></td>
</tr>
<tr class="tableData">
<td>65</td>
<td id="username65"></td>
<td id="recent65"></td>
<td id="total365"></td>
</tr>
<tr class="tableData">
<td>66</td>
<td id="username65"></td>
<td id="recent65"></td>
<td id="total65"></td>
</tr>
<tr class="tableData">
<td>67</td>
<td id="username67"></td>
<td id="recent67"></td>
<td id="total67"></td>
</tr>
<tr class="tableData">
<td>68</td>
<td id="username68"></td>
<td id="recent68"></td>
<td id="total68"></td>
</tr>
<tr class="tableData">
<td>69</td>
<td id="username69"></td>
<td id="recent69"></td>
<td id="total69"></td>
</tr>
<tr class="tableData">
<td>70</td>
<td id="username70"></td>
<td id="recent70"></td>
<td id="total70"></td>
</tr>
<tr class="tableData">
<td>71</td>
<td id="username71"></td>
<td id="recent71"></td>
<td id="total71"></td>
</tr>
<tr class="tableData">
<td>72</td>
<td id="username72"></td>
<td id="recent72"></td>
<td id="total72"></td>
</tr>
<tr class="tableData">
<td>73</td>
<td id="username73"></td>
<td id="recent73"></td>
<td id="total73"></td>
</tr>
<tr class="tableData">
<td>74</td>
<td id="username74"></td>
<td id="recent74"></td>
<td id="total74"></td>
</tr>
<tr class="tableData">
<td>75</td>
<td id="username75"></td>
<td id="recent75"></td>
<td id="total75"></td>
</tr>
<tr class="tableData">
<td>76</td>
<td id="username76"></td>
<td id="recent76"></td>
<td id="total76"></td>
</tr>
<tr class="tableData">
<td>77</td>
<td id="username77"></td>
<td id="recent77"></td>
<td id="total77"></td>
</tr>
<tr class="tableData">
<td>78</td>
<td id="username78"></td>
<td id="recent78"></td>
<td id="total78"></td>
</tr>
<tr class="tableData">
<td>79</td>
<td id="username79"></td>
<td id="recent79"></td>
<td id="total79"></td>
</tr>
<tr class="tableData">
<td>80</td>
<td id="username80"></td>
<td id="recent80"></td>
<td id="total80"></td>
</tr>
<tr class="tableData">
<td>81</td>
<td id="username81"></td>
<td id="recent81"></td>
<td id="total81"></td>
</tr>
<tr class="tableData">
<td>82</td>
<td id="username82"></td>
<td id="recent82"></td>
<td id="total82"></td>
</tr>
<tr class="tableData">
<td>83</td>
<td id="username83"></td>
<td id="recent83"></td>
<td id="total83"></td>
</tr>
<tr class="tableData">
<td>84</td>
<td id="username84"></td>
<td id="recent84"></td>
<td id="total84"></td>
</tr>
<tr class="tableData">
<td>85</td>
<td id="username85"></td>
<td id="recent85"></td>
<td id="total85"></td>
</tr>
<tr class="tableData">
<td>86</td>
<td id="username86"></td>
<td id="recent86"></td>
<td id="total386"></td>
</tr>
<tr class="tableData">
<td>87</td>
<td id="username870"></td>
<td id="recent87"></td>
<td id="total87"></td>
</tr>
<tr class="tableData">
<td>88</td>
<td id="username88"></td>
<td id="recent88"></td>
<td id="total88"></td>
</tr>
<tr class="tableData">
<td>89</td>
<td id="username89"></td>
<td id="recent89"></td>
<td id="total89"></td>
</tr>
<tr class="tableData">
<td>90</td>
<td id="username90"></td>
<td id="recent90"></td>
<td id="total90"></td>
</tr>
<tr class="tableData">
<td>91</td>
<td id="username91"></td>
<td id="recent91"></td>
<td id="total91"></td>
</tr>
<tr class="tableData">
<td>92</td>
<td id="username92"></td>
<td id="recent92"></td>
<td id="total92"></td>
</tr>
<tr class="tableData">
<td>93</td>
<td id="username93"></td>
<td id="recent93"></td>
<td id="total93"></td>
</tr>
<tr class="tableData">
<td>94</td>
<td id="username94"></td>
<td id="recent94"></td>
<td id="total94"></td>
</tr>
<tr class="tableData">
<td>95</td>
<td id="username95"></td>
<td id="recent95"></td>
<td id="total95"></td>
</tr>
<tr class="tableData">
<td>96</td>
<td id="username96"></td>
<td id="recent96"></td>
<td id="total96"></td>
</tr>
<tr class="tableData">
<td>97</td>
<td id="username97"></td>
<td id="recent97"></td>
<td id="total97"></td>
</tr>
<tr class="tableData">
<td>98</td>
<td id="username98"></td>
<td id="recent98"></td>
<td id="total98"></td>
</tr>
<tr class="tableData">
<td>99</td>
<td id="username99"></td>
<td id="recent99"></td>
<td id="total99"></td>
</tr>
<tr class="tableData">
<td>100</td>
<td id="username100"></td>
<td id="recent100"></td>
<td id="total100"></td>
</tr>
</table>
<h5 id="Credits">Created by <a href="https://codepen.io/lhovee/">Luke Hovee</a></h5>
</body>
header {
text-align: center;
}
body {
background-color: #96d5d6;
}
.headings {
width: 100%;
background-color: #ff5733;
}
.tableContainer {
margin-left: 5%;
width: 90%;
}
.tableData {
background-color: white;
width: 100%;
text-align: center;
}
#Credits {
text-align: center;
}
.current {
color: red;
}
.pony {
height: 25px;
}
var arr = [];
for (var a = 1; a < 101; a++) {
arr.push("#username" + a)
arr.push("#recent" + a)
arr.push("#total" + a)
};
console.log(arr[0]);
$(document).ready(function() {
$.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/alltime", function(data) {
for (var i = 0; i < arr.length; i++) {
$(arr[i * 3]).html(data[i].username + " " + '<img class="pony" src="' + data[i].img + '"/>')
$(arr[i * 3 + 1]).html(data[i].recent)
$(arr[i * 3 + 2]).html(data[i].alltime)
};
});
$("#state2").click(function() {
$.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/alltime", function(data) {
for (var i = 0; i < arr.length; i++) {
$(arr[i * 3]).html(data[i].username + " " + '<img class="pony" src="' + data[i].img + '"/>')
$(arr[i * 3 + 1]).html(data[i].recent)
$(arr[i * 3 + 2]).html(data[i].alltime)
};
});
});
$("#state1").click(function() {
$.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent", function(data) {
for (var j = 0; j < arr.length; j++) {
$(arr[j * 3]).html(data[j].username + " " + '<img class= "pony" src="' + data[j].img + '"/>')
$(arr[j * 3 + 1]).html(data[j].recent)
$(arr[j * 3 + 2]).html(data[j].alltime)
};
});
});
});
var WhoseLeading = React.createClass({
render: function() {
return (
<div>
<header>
<h2>Whose Leading?</h2>
</header>
</div>
)
}
});
ReactDOM.render(<WhoseLeading />, document.getElementById('whoLead'));
Also see: Tab Triggers