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 vote106 views1 answer
Bootsrap link
Html
6 votes113 views2 answers
Embed png in html
Html
0 vote110 views1 answer
Remark asp markup
Html
6 votes107 views1 answer
Textarea placeholder
Html
0 vote113 views1 answer
3 tab and form connected bootstrap
Html
0 vote100 views1 answer
Html5 fonts
Html
1 vote114 views2 answers
Link to the same page html
Html
1 vote122 views2 answers
Html body full height
Html
1 vote111 views1 answer
Jsf axonivy sub component
Html
0 vote107 views1 answer
How to change color in html element
Html