JSFiddle - React, Tailwind, and code Playground

by cyberowl

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div id="app"><button v-on:click="xhr">XHR</button>
  <br>
  <div v-for="data in data" :key="data.id">
    <h3>{{ data.title }}:{{ data.id }}</h3>
    <li>{{ data.body }}</li>
  </div></div>

CSS

#mon-refresh {
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
  text-shadow: 0 0 0 transparent, 0 0 1px rgba(0, 0, 0, 0.3);
  color: #646464;
}

#mon-refresh:hover {
  color: #333333;
}

.progress-text-mon {
  font-size: 15px;
  text-shadow: 0 0 0 transparent, 0 0 1px rgba(0, 0, 0, 0.3);
  font-family: "Myriad Pro", Tahoma, sans-serif;
  font-weight: normal;
  color: #646464;
}

.left-mon {
  cursor: default;
  padding-top: 5px;
  float: left;
}

.left-mon a {
  text-decoration: none;
  color: #646464 !important;
}

.right-mon {
  cursor: default;
  float: right;
  padding-top: 5px;
  margin-bottom: 15px;
}

.monitoring-hr-top-mon,
.monitoring-hr-bottom-mon {
  margin-bottom: 15px
}

.monitoring-hr-bottom-mon {
  margin-top: 40px;
}

@-webkit-keyframes progress-bar-stripes-mon {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes progress-bar-stripes-mon {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes-mon {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes-mon {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress-mon {
  display: block;
  height: 20px;
  margin-bottom: 35px;
  background-color: #f5f5f5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -khtml-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(32, 32, 32);
  border: 1px solid rgba(32, 32, 32, 0.27);
  _border: 1px solid rgb(32, 32, 32);
}

.progress-bar-mon {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
 ...

JavaScript

const monitoring = {
    servers: [{
      address: "play.minesuperior.com",
      port: "", // Optional
      name: "play.minesuperior.com",
    }, {
      address: "mineverse.com",
      name: "Mineverse",
    }, {
      address: "mc.hypixel.net",
      name: "Hypixel",
    }, {
      address: "128.0.0.1s",
      port: "25567",
      name: "Error test",
    }],
    total: {
      name: "Total Online"
    },
    reset() {
      for (let i = 0; i < this.servers.length; i++) {
        this.servers[i].online = 0;
        this.servers[i].max_online = 0;
        document.getElementById(`server${i}`).innerHTML = this.loadingHtml(this.servers[i]);
      }
      this.total.servers_loaded = 0;
      this.updateTotal();
    },
    updateTotal() {
      if (this.total.servers_loaded < this.servers.length) {
        html = this.loadingHtml(this.total);
      } else {
        let totalCurrent = 0,
          totalMax = 0;
        for (var i = 0; i < this.servers.length; i++) {
          totalCurrent += this.servers[i].online;
          totalMax += this.servers[i].max_online;
        }
        var total_data = {
            players: {
              now: totalCurrent,
              max: totalMax,
            }
          },
          html = this.onlineHtml(this.total, total_data);
      }
      document.getElementById(`globalOnline`).innerHTML = html;
    },
    update() {
      this.reset();
      for (let i = 0; i < this.servers.length; i++) {
        this.updateServerState(i);
      }
      this.updateTotal();
    },
    updateServerState(serverId) {
      let server = this.servers[serverId];
      let serverUrl = `https://mcapi.us/server/status?ip=${server.address}` + (server.port ? `&port=${server.port}` : ``);
      let xhr = new XMLHttpRequest()
      xhr.open(`GET`, serverUrl, true);
      xhr.responseType = `json`;
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          let status = xhr.status;
          if (status == 200) {
           ...