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

5 votes194 views5 answers
Table in README
Html
0 vote163 views1 answer
Bootstrap table downwards
Html
1 vote187 views1 answer
Do not close dialog box when click outside bootstrap modal
Html
0 vote221 views1 answer
Bootstrap modal causes page shift
Html
0 vote184 views1 answer
Html5 number integer
Html
5 votes194 views1 answer
Laravel route name routes
Html
0 vote209 views1 answer
How to download youtube videos in pc though html
Html
1 vote196 views1 answer
Jquery specific child by index
Html
2 votes207 views1 answer
Link that scrolls down the page
Html
0 vote188 views2 answers
Inject modal to page through extension
Html