JSFiddle - React, Tailwind, and code Playground

CouchDB: Master-Master Replication Status

by Alex

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:700"></script>
<div class="columns">
  <div class="column">

    <div id="divan" class="card">
      <div class="card-content">
        <div class="media">
          <div class="media-left">
            <figure class="image is-48x48">
              <img...

CSS

body {
  padding: 20px;
  padding-top: 60px;
  font-size: 16px;
}

.not-in-sync {
  box-shadow: 0px 0px 20px #f00;
}

.docs h1,
.death h1,
.seq h1 {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.5rem;
  color: white;
}

.docs {
  background-color: hsl(171, 100%, 41%);
}

.docs:before {
  content: "Docs";
}

.death {
  background-color: hsl(348, 100%, 61%);
}

.death:before {
  content: "Deleted";
}

.seq {
  background-color: hsl(204, 86%, 53%);
}

.seq:before {
  content: "Seq";
}

.docs:before,
.death:before,
.seq:before {
  font-size: 12px;
  font-weight: 700;
  color: white;
  position: relative;
  top: -10px;
}

JavaScript

const status = {
  divan: 'http://divan.db.nb.vg/natureoffice-gaia',
  canape: 'http://canape.db.nb.vg/natureoffice-gaia',
  init: function() {
    status.load(status.divan, '#divan');
    status.load(status.canape, '#canape');
  },
  load: function(url, card) {
    fetch(url)
      .then(function(response) {
        console.log('payload', response);
        return response.json();
      })
      .then(function(resp) {
        console.log('data', resp);
        document.querySelector([card, '.docs h1'].join(' ')).innerText = resp.doc_count
        document.querySelector([card, '.death h1'].join(' ')).innerText = resp.doc_del_count
        document.querySelector([card, '.seq h1'].join(' ')).innerText = resp.update_seq.split('-')[0];

      })
      .catch(function(err) {
        console.log(arguments);
      });
  },

}

status.init();