JSFiddle - React, Tailwind, and code Playground

by Joe Cisneros

HTML

<html>
  <head>
    <title>Site Status</title>
  </head>
  <body>
    <table id="statuses">
      <thead>
        <tr>
          <th>HTTP Site</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <p>some sites may require signing in</p>
  </body>
</html>

CSS

body { 
  font-family: Verdana, Tahoma, sans-serif; 
  background-color: #282828;
  color: #DDD
}
p {
  margin: 10px;
  display:inline-block;
  outline: 1px solid aquamarine;
  padding: 3px;
}
table {
  padding: 3px;
  vertical-align: top;
  text-align: left;
}
thead {
  text-align: center;
  text-decoration: overline underline;
  color: aquamarine;
}
th { 
  color: #FFF; 
  padding-bottom: 3px; 
  font-size:18px; 
  width: 100px;
}
th:not(:first-of-type) {width: 200px;}
tbody {
  outline: 1px solid aquamarine;
  background-color: #444;
}
tr:nth-child(even) td:not(:first-of-type){
  color: #000;
  background-color:#999;
}
td { 
  padding: 6px; 
  margin: 0; 
  text-align:left;  
}
td:first-of-type { text-align: right; }

a {color: aquamarine;}
a:hover,a:active {text-decoration:none;}

td.error {
  color:salmon !important; 
  background-color: #333 !important;
}

.loading span {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  margin-top: -0.3em;
  line-height: 1.5em;
  vertical-align: text-bottom;
}

.loading span:after {
  display: inline-table;
  white-space: pre;
  text-align: left;
}
.loading span:after {
  content: "\A.\A..\A...";
  animation: spin4 .6s steps(4) infinite;
}

@keyframes spin4 { to { transform: translateY( -6.0em); } }

JavaScript

'use strict';

var serverList = "httpstat.us/403?sleep=4000 httpstat.us/404?sleep=5000 httpstat.us/400?sleep=6000 httpstat.us/200?sleep=7000 facebook.com/ITJoePC github.com/ITJoePC twitter.com/ITJoePC yahoo.com google.com reddit.com why.com gaming.com nope.com";
var prefix = "https://";
var servers = serverList.split(' '); //2 spaces break
var statuses = [];

for (var i=0; i<servers.length; i++) {
  var message = pingServer(servers[i]);
  var statusField = addRow(servers[i],"waiting");
  statuses[servers[i]] = statusField;
}

function addRow(server, status) {
  var tbody = document.getElementById('statuses').tBodies.item(0);
  var tr = document.createElement('tr');
  var td1 = document.createElement('td');
  var td2 = document.createElement('td');
  var span = document.createElement('span');
  td2.className = 'loading';
  
  var textNodeServer = document.createTextNode(server); // "[censored]");
  var textNodeStatus = document.createTextNode(status);

  var a = document.createElement('a');
  a.appendChild(textNodeServer);
  a.href = prefix+server;
  a.target = "_blank";
  td1.appendChild(a);
  
  td2.appendChild(textNodeStatus);
  td2.appendChild(span);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
  
  return textNodeStatus;
}

function pingServer(server) {
  var request = new XMLHttpRequest();
  var message = "";
  var className = "";
  request.open('GET', prefix+server, true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      message = '[' +request.status+ ']: Success';
      className = ""; // clear class name
    } else {
      // We reached our target server, but it returned an error
      message = '[' +request.status+ ']: "'+request.responseText+'"';
      className = "error";
    }

    statuses[server].nodeValue = message;
    statuses[server].parentElement.className = className;
  };

  request.onerror = function() {
    // There was a connection error of some...