Word count alpine js

<div x-data="{ wordCount: 0 }" x-init="wordCount = $el.querySelector('textarea').value.trim().split(' ').length;">
  
  <textarea class="form-input border" rows=5 @keyup="wordCount = $event.target.value.trim().split(' ').length;"></textarea>
       
  <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

Similar codes

79 votes140 views4 answers
How to connect a js file in html
Html
0 vote160 views1 answer
Minimum html document vs code shortcut
Html
0 vote171 views1 answer
Html insert pdf
Html
1 vote115 views1 answer
Column ordering in bootstrap
Html
0 vote170 views1 answer
Html5
Html
4 votes177 views1 answer
How to insert degree symbol in html
Html
0 vote147 views1 answer
Html get button text
Html
0 vote161 views3 answers
How to get svg from pucblic folder in react
Html
1 vote166 views1 answer
Bootstrap textarea width
Html
8 votes178 views2 answers
Html change background color of page
Html