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 votes259 views5 answers
InnerHTML is not a function
Html
1 vote229 views2 answers
Add a floating call/phone button in html
Html
0 vote233 views1 answer
Etiquetas html para seleccionar imagenes
Html
42 votes235 views5 answers
Textarea resize off
Html
0 vote213 views1 answer
How to make a whatsapp hyperlink html
Html
0 vote211 views1 answer
Html repeating video
Html
24 votes216 views5 answers
How to make a rectangle in javascript
Html
6 votes226 views3 answers
Facebook seo meta tags
Html
3 votes213 views5 answers
Align button right
Html
0 vote218 views1 answer
Button that links to controller html
Html