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 vote247 views1 answer
Nested select option in html
Html
0 vote236 views1 answer
Abbr
Html
4 votes243 views2 answers
How to change h1 color in html
Html
0 vote243 views1 answer
Ome.tv no camera
Html
38 votes243 views6 answers
How to make a button in html
Html
0 vote257 views1 answer
Default wp_new_user_notification_email
Html
43 votes225 views6 answers
Template html
Html
0 vote232 views1 answer
How to stop moving text in html when you hover over it
Html
112 votes190 views10 answers
December global festivities
Html
1 vote231 views1 answer
How to convert a html canvas into a png file
Html