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

44 votes152 views6 answers
Comment in html
Html
0 vote158 views1 answer
Amp-img example
Html
0 vote165 views1 answer
Flutter html to pdf
Html
0 vote155 views2 answers
Html beginform asp.net mvc add id
Html
0 vote158 views1 answer
Rounded borders svg
Html
7 votes179 views2 answers
Infocard bootstrap 4 css templates
Html
0 vote174 views1 answer
Html marquee space between images
Html
0 vote156 views1 answer
Remove validation error after it has been corrected in html
Html
0 vote159 views2 answers
Tailwind CSS typography
Html
0 vote150 views1 answer
Apache serve json
Html