Discussion on: Creating a textarea character limit indicator

[G]

Sure thing. Now i will start by saying I am still very new to all this. But here goes.

Here is the HTML for the textareas:

//Text area 1
<label for="textArea1" class="requiredfield">This is the text area 1 text box</label>
<textarea id="textArea1" name="textArea1" spellcheck="true" rows="4" cols="50" maxlength="500"></textarea>
<div id="progress-textArea1">
    <div id="progress-bar-textArea1"></div>
    <p id="remaining-chars-textArea1"></p>
</div>

...

//Text area 2
<label for="textArea2" class="requiredfield">This is the text area 2 text box</label>
<textarea id="textArea2" name="textArea2" spellcheck="true" rows="4" cols="50" maxlength="500"></textarea>
<div id="progress-textArea2">
    <div id="progress-bar-textArea2"></div>
    <p id="remaining-chars-textArea2"></p>
</div>

Here is the updated CSS:

/*This is for the textArea character counter and progress bars*/
#progress-textArea1, #progress-textArea2 {
    width: 100%;
    height: 7px;
    box-shadow: inset 1px 1px 2px #ccc;
    border: 1px solid #bbb;
    border-radius: 15px;
  }

  #progress-bar-textArea1, #progress-bar-textArea2 {
    height: 100%;
  }

  #remaining-chars-textArea1, #remaining-chars-textArea2 {
    font-size: 11px;
    color: #b62020;
    margin-top: 3px;
    float: right;
    display: none;
  }

And here is the updated Javascript:

/*
This section relates to the textArea character counter and progress bar
It loops through all textarea elements and processes each within the for loop.
This requires the progressBar IDs to be appended with the textArea field ID in the HTML and CSS
*/ 
let allTextArea = document.querySelectorAll("textarea");                
let numAllTextArea = allTextArea.length;                                

for (let i=0; i<=numAllTextArea; i++) {
    let fieldToProcess = allTextArea[i].id;                             
    let progressBarId = "progress-bar-"+fieldToProcess;                 
    let remCharsId = "remaining-chars-"+fieldToProcess;                 

    let textArea = document.getElementById(fieldToProcess);             
    let progressBar = document.getElementById(progressBarId);           
    let remChars = document.getElementById(remCharsId);                 

    function charCounter(inputField) {
        let maxLength = inputField.getAttribute("maxlength");           
        let currentLength = inputField.value.length;                      
        let progressWidth = (currentLength / maxLength) * 100;            

        progressBar.style.width = `${progressWidth}%`;                    
        remChars.style.display = "none";

        if (progressWidth <= 60) {
            progressBar.style.backgroundColor = "#00594c";
        } else if (progressWidth > 60 && progressWidth < 85) {
            progressBar.style.backgroundColor = "#ffd602";
        } else {
            progressBar.style.backgroundColor = "#b8232f";
        }
        remChars.innerHTML = `${maxLength - currentLength} characters left`;
        remChars.style.display = "block";
        }

        textArea.oninput = () => charCounter(textArea);
    }

[sahra 💫]

That's quite nice, but I do find some little issues that might arise with this approach. The first issue being that the warning text doesn't popup at the end, instead it's visible from start to finish, which doesn't look right. Also, I added two new texareas, but they didn't seem to be functional as the first two. Overall, having a function Inside a for loop like that isn't a very neat approach, makes the code unscalable and the function hard to maintain.

A cleaner and easier approach to achieve this for multiple textareas in the document is to separate the function from the for loop.

Here is my updated counter function:

const textareas = document.querySelectorAll(".txt");
const progressBars = document.querySelectorAll(".progress-bar");
const remCharsElems = document.querySelectorAll(".remaining-chars");

function charCounter(inputField, progress, warningTxt) {
  const maxLength = inputField.getAttribute("maxlength");
  const currentLength = inputField.value.length;

  const progressWidth = (currentLength / maxLength) * 100;
  progress.style.width = `${progressWidth}%`;
  warningTxt.style.display = "none";

  if (progressWidth <= 60) {
    progress.style.backgroundColor = "rgb(19, 160, 19)";
  } else if (progressWidth > 60 && progressWidth < 85) {
    progress.style.backgroundColor = "rgb(236, 157, 8)";
  } else {
    progress.style.backgroundColor = "rgb(241, 9, 9)";
    warningTxt.innerHTML = `${maxLength - currentLength} characters left`;
    warningTxt.style.display = "block";
  }
}

This way the function logic has been separated and can be used anywhere.

Here is the forEach loop to get all the texareas in the document and apply the counter function to them.

textareas.forEach((textarea, i) => {
  textarea.oninput = () => charCounter(textarea, progressBars[i], remCharsElems[i]);
})

Now, you can add as many texareas as you want, without needing to modify the JavaScript again.
You can check it out in the codepen below, where I added two new textareas with different maxlengths: