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 vote259 views2 answers
Meta og:image
Html
1 vote254 views1 answer
Minmax length password
Html
0 vote243 views1 answer
Git print commit tree html
Html
2 votes196 views1 answer
How to give a default active value to a radio button
Html
20 votes247 views6 answers
How to make button link to other page
Html
1 vote272 views1 answer
Bootstrap a link disabled
Html
0 vote225 views2 answers
Side by side tables in bootstrap
Html
9 votes277 views1 answer
2 way bind vue
Html
3 votes258 views1 answer
Em tag in html5
Html
15 votes237 views3 answers
Favicon html link
Html