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

2 votes282 views1 answer
Svg text
Html
1 vote282 views1 answer
Meta redirect header
Html
0 vote295 views1 answer
Link in new tab
Html
1 vote292 views1 answer
Django jinja extract elements from form object
Html
3 votes308 views1 answer
Nav b5
Html
15 votes296 views4 answers
Bootstrap Pill badges
Html
9 votes298 views3 answers
Multi line comment html
Html
0 vote312 views1 answer
Html role for icon
Html
1 vote319 views1 answer
Svg icon not showing html
Html
0 vote298 views1 answer
Why place holder does not show
Html