state-based components

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="App__container" id="app">
  <div id="display"></div>

  <button onclick="incCountUp()">+Count</button>
</div>

CSS

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin-top: 0;
}

.App__container {
  padding: 15px;
}

.Score {
  font-size: 28px;
}

.text-error {
  color: indianred;
}

.text-success {
  color: green;
  font-size: 40px;
}

JavaScript

const display = document.getElementById("display");

const state = {
  count: 0,
}

// Components

const counter = count => {
  let classname = "text-error";
  
  if (count > 10) {
  	classname = "text-success";
  }
  
  return (
    `<p class="Counter">Count: <span class="${classname}">${count}</span></p>`
  );
};

// Render Methods

function renderCount() {
  display.innerHTML = counter(state.count);
}

// Update methods

function incCountUp() {
  let newCount = state.count + 1;
  state.count = newCount;
  
  renderCount();
}

renderCount();