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 vote133 views2 answers
Bootstrap js bundle
Html
0 vote140 views1 answer
Make text bold js
Html
0 vote136 views1 answer
Html5 use of section tag in onepage template
Html
4 votes133 views2 answers
History.back()
Html
0 vote155 views1 answer
Table bootstrap dark
Html
0 vote140 views1 answer
Captcha code
Html
0 vote136 views2 answers
El barka mouse
Html
-1 vote134 views1 answer
Html to pdf react
Html
0 vote144 views1 answer
Representing the transition on image
Html
0 vote134 views1 answer
Html video on end
Html