<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)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.