123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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'));
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console