JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="input" rows="4" cols="50" maxlength="10">
</textarea>
<span id="output"></span>
JavaScript
var maxWords = 500;
var input = document.getElementById('input');
var output = document.getElementById('output');
output.innerHTML = maxWords + " words left";
input.onkeyup = function() {
var words = input.value.split(" "); // Convert string into words
var diff = maxWords - words.length; // Subtract words from maxWords
console.log(diff)
console.log(words.length);
if (diff) { // If words < maxWords
output.innerHTML = diff + " words left"; // Tell user new word count
} else { // Prevent user from inputting more than maxWords
words.length = maxWords; // Remove words over limit
input.value = words.join(" "); // Fill input
}
}