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

0 vote171 views2 answers
How to align a section center in html
Html
0 vote181 views1 answer
Web development html chapter 1
Html
0 vote179 views2 answers
Wordpress get link
Html
49 votes184 views6 answers
Image html
Html
0 vote193 views1 answer
Bokeh save html file to directory
Html
-1 vote190 views3 answers
Tailwind
Html
1 vote180 views1 answer
Nuxt v if two conditions
Html
1 vote198 views1 answer
Bootstrap starter code
Html
0 vote178 views2 answers
Inject modal to page through extension
Html
0 vote183 views2 answers
Common html tags
Html