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

0 vote276 views1 answer
Servicenow jelly debug
Html
3 votes257 views3 answers
Add icon to website tab
Html
0 vote276 views1 answer
How to add jquery to shopify
Html
0 vote249 views1 answer
Angular right click not working
Html
0 vote269 views1 answer
How to make a whatsapp hyperlink html
Html
0 vote273 views1 answer
To ensure user input is a link in html
Html
0 vote282 views1 answer
Navbar html mdn
Html
0 vote271 views1 answer
RouterLinkActive in dropdown main text
Html
29 votes292 views6 answers
Html center text
Html
0 vote292 views1 answer
Getmdl
Html