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 vote308 views2 answers
Html animated background
Html
-1 vote307 views2 answers
Div shift right
Html
1 vote347 views1 answer
Html image onclick
Html
8 votes332 views2 answers
How to turn html5 picturee into link
Html
38 votes356 views6 answers
Iframe in html
Html
4 votes326 views1 answer
Bootsrap label
Html
10 votes297 views2 answers
Get input value on button click javascript
Html
0 vote338 views2 answers
Angular raw html
Html
7 votes330 views1 answer
Qs cdn
Html
0 vote362 views1 answer
B-table-column v-slot undefined
Html