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

1 vote253 views1 answer
Cards froup
Html
1 vote187 views2 answers
Convert instagram embed script to iframe
Html
1 vote190 views1 answer
Convert element to html string
Html
0 vote178 views1 answer
Sematic ui modals
Html
0 vote192 views2 answers
How to insert code in html
Html
15 votes200 views6 answers
Html title attribute
Html
50 votes177 views6 answers
How to change font size in html
Html
0 vote221 views1 answer
How to make clicking button send you down to a certain section of page html
Html
0 vote214 views1 answer
Javascript looparray
Html
7 votes211 views3 answers
Read only html
Html