Johns Hopkins COVID-19 Data

by Yisroel Meir Blumstein

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Johns Hopkins API Demo</title>
  </head>

  <body onload="JSFiddleTest();">

    <button type="button" class="collapse-button">Show Cases Table</button>
    <div id="cases-table-div" class="collapse-content"></div>

    <button type="button" class="collapse-button">Show Deaths Table</button>
    <div id="deaths-table-div" class="collapse-content"></div>

    <button type="button" class="collapse-button">Show Cases JSON</button>
    <div id="cases-JSON-div" class="collapse-content"></div>

    <button type="button" class="collapse-button">Show Deaths JSON</button>
    <div id="deaths-JSON-div" class="collapse-content"></div>

  </body>

</html>

CSS

body {
  overflow: scroll;
}

/* Collapse button */
.collapse-button {
  background-color: #ccc;
  color: #333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Collapse button down */
.collapse-button .active {
  background-color: #999;
}

/* Collapse button hover */
.collapse-button:hover {
  background-color: #777;
}

/* Collapsible content. */
.collapse-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #eee;
}

JavaScript

// John's Hopkins API Data as CSV
// See https://github.com/CSSEGISandData/COVID-19

// URLs for the CSVs on GitHub
const casesURL = "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv";
const deathsURL = "https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv";

// Test the code on jsfiddle.net
function JSFiddleTest() {

  // Add styling to the collapsible content
  StyleCollapsibles();

  // Run, and then update every 5 min
  FetchJHData();
  window.setInterval(5 * 60 * 1000, FetchJHData);
}

// Make the raw JSON collapsible
function StyleCollapsibles(className) {
  var eCollapsibles = document.getElementsByClassName("collapse-button");
  for (var i = 0; i < eCollapsibles.length; i++) {
    eCollapsibles[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "inline-block") {
        content.style.display = "none";
        switch (content.id) {
          case "cases-table-div":
            this.innerHTML = "Show Cases Table";
            break;
          case "deaths-table-div":
            this.innerHTML = "Show Deaths Table";
            break;
          case "cases-JSON-div":
            this.innerHTML = "Show Cases JSON";
            break;
          case "deaths-JSON-div":
            this.innerHTML = "Show Deaths JSON";
            break;
        }
      } else {
        content.style.display = "inline-block";
        switch (content.id) {
          case "cases-table-div":
            this.innerHTML = "Hide Cases Table";
            break;
          case "deaths-table-div":
            this.innerHTML = "Hide Deaths Table";
            break;
          case "cases-JSON-div":
            this.innerHTML = "Hide Cases JSON";
            break;
          case...