Counters Poller

by alexbfree

HTML

<div class="page">
</div>
<div class="project-metadata content-container">
  <div class="project-metadata-header">
    <span>Pulsar Hunters</span>
    <span> - </span>
    <span>Live Statistics</span>
  </div>
  <div class="project-metadata-stats">
    <div class="project-metadata-stat">
      <div id="volunteers">-</div>
      <div>Registered Volunteers</div>
    </div>
    <div class="project-metadata-stat">
      <div id="classifications">-</div>
      <div>Classifications</div>
    </div>
    <div class="project-metadata-stat">
      <div id="subjects">-</div>
      <div>Active Subjects</div>
    </div>
    <div class="project-metadata-stat">
      <div id="retired">-</div>
      <div>Retired Subjects</div>
    </div>
  </div>
</div>
</div>

CSS

.project-metadata-header {
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
}

.project-metadata-stats {
  font-size: 20px;
}

.project-metadata {
  padding: 1.5em 3vw;
  margin: 0;
  background: rgba(0, 0, 0, .8);
}

div {
  font-size: 14px;
  color: #fff;
  font-family: "Open Sans", "Gill Sans", Arial, sans-serif;
}

.project-metadata-stats {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

#volunteers,
#retired,
#subjects,
#classifications {
  font-size: 2em;
}

.project-metadata-stat {
  text-align: center;
}

JavaScript

update = function() {
  $.ajax({
    beforeSend: function(request) {
      request.setRequestHeader("Accept", "application/vnd.api+json; version=1");
      request.setRequestHeader("Content-Type", "application/json");
    },
    url: 'https://www.zooniverse.org/api/projects?slug=zooniverse/pulsar-hunters',
    success: function(data) {
      $("#volunteers").html(data.projects[0].classifiers_count);
      $("#classifications").html(data.projects[0].classifications_count);
      retired_subjects = data.projects[0].retired_subjects_count;
      active_subjects = data.projects[0].subjects_count - data.projects[0].retired_subjects_count;
      $("#subjects").html(active_subjects);
      $("#retired").html(data.projects[0].retired_subjects_count);
    },
    complete: function() {
      setTimeout(update, 1000);
    }
  });
};

setTimeout(update, 1000);