<label for="text">Type here:</label>
<textarea placeholder="Type here" id="text"></textarea>
<div>Characters remaining: <span id="remaining">280</span></div>
textarea {
  display: block;
  width: 300px;
  height: 100px;
}
const textarea = document.querySelector('#text')
const remaining = document.querySelector('#remaining')

function updateUI(text) {
  // Simulate an expensive UI, run some blocking work
  let start = Date.now()
  while (Date.now() - start < 70) {}
  remaining.textContent = 280 - text.length
}

textarea.addEventListener('input', () => {
  updateUI(textarea.value)
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.