<body>
  <textarea id="textarea" cols="30" rows="10"></textarea>
  <span></span>
  <script>
    const WORD_LIMIT = 3
    const elTextarea = document.querySelector('textarea')
    const elSpan = document.querySelector('span')
    elSpan.innerHTML = `0/${WORD_LIMIT}`
    elTextarea.addEventListener('keyup', el => {
      let val = el.target.value || ''
      if (!val) return elSpan.innerHTML = `0/${WORD_LIMIT}`
      const words = val.trim().split(' ')
      if (words.length >= WORD_LIMIT) {
        el.target.value = words.slice(0, WORD_LIMIT).join(' ')
        elSpan.innerHTML = `${WORD_LIMIT}/${WORD_LIMIT}`
        return
      }
      elSpan.innerHTML = `${words.length}/${WORD_LIMIT}`
    })
  </script>
</body>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.