<div id="container">
  <h1 id="title">Count Your Characters</h1>
  <textarea id="textbox" cols="80" rows="15"></textarea>
  <p id="charCount">Character Count: <span id="count">0</span></p>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 10px solid #0065a3;
  background: hsla(203, 100%, 78%, 1);
}

#title {
  margin-bottom: 20px;
  color: #0065a3;
}

#textbox {
  margin-bottom: 20px;
  font-size: 16px;
  letter-spacing: 0.8px;
  padding: 10px;
}

#charCount {
  font-size: 20px;
  color: #0065a3;
  font-weight: bold;
}
let textbox = document.getElementById("textbox");
let count = document.getElementById("count");

function updateCount() {
  count.innerHTML = textbox.value.length;
}

textbox.oninput = updateCount;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.