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 vote203 views1 answer
How to display superscript in breadcrumbs in html
Html
1 vote202 views2 answers
Html animated background
Html
0 vote212 views1 answer
How to remove box from form in html
Html
2 votes215 views4 answers
Tailwind CSS buttons
Html
2 votes220 views1 answer
Html text not markable
Html
1 vote210 views1 answer
How to make a yourbue icon in html
Html
1 vote176 views1 answer
Html to hml
Html
2 votes207 views1 answer
How to center navbar link bootstrap
Html
1 vote220 views1 answer
Javafx html tooltip
Html
1 vote229 views4 answers
Ex
Html