word count alpine js
<div x-data="{ wordCount: 0 }" x-init="wordCount = $el.querySelector('pre').value.trim().split(' ').length;"> <pre class="form-input border" rows=5 @keyup="wordCount = $event.target.value.trim().split(' ').length;"></pre> <p class="text-xs" :class="wordCount < 20 ? 'text-red-700' : 'text-green-700'">Word counts: <span x-html="wordCount"></span> min: 20</p> </div>
Source: codepen.io