Creating a textarea character limit indicator
Tags: webdev, javascript, beginners, tutorial
Published: 2024-04-05 10:41:20

## Introduction
Textareas are an essential tool of the web, allowing applications to collect additional information from users. This helps to facilitate seamless communication and interaction between users and the application.

## Why is a character limit indicator important?
A character limit indicator lets the user know how many characters are allowed in the textarea as set by its `maxlength` attribute. This allows users to tailor their text to convey the necessary information while being conscious of how much writing space they are left with.

In this article, we will be looking at how we can implement a character limit indicator for the textarea fields in our projects.

Below is a preview of what we will be creating.

![Textarea character limit preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnfe1y40sxwk4r6yyv9n.png)

Now that we understand the importance of a character limit indicator, let’s dive into the implementation.

## Setting up the HTML
To get started, Inside our HTML file, first we include an `h1` tag with the name of our project.
```html
<h1>Textarea character limit indicator</h1>
```

Next, we create a container `div` to hold the textarea and progress bar.
```html
<div id="container">
</div>
```

Inside this `div`, we include a `label` and the `textarea` element with a `maxlength` property of 150 characters allowed in the text field.
```html
<label for="txt">Type something:</label>
<textarea name="type-something" id="txt" maxlength="150" cols="30" rows="10"></textarea>
```

Below the textarea field, we include the structure of our progress bar which we will be styling later on.
```html
<div id="progress">
  <div id="progress-bar"></div>
  <p id="remaining-chars"></p>
</div>
```

Our html should look something like this now:

![plain HTML structure of the textarea character limit preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulgw5z9gbcxhetfdyrtl.png)

That is all for our HTML file. Next, we move into our CSS file to style the elements.

## Styling the page with CSS
Inside our CSS file, apply some default page styling first.
```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

Next, we style the `body` and `h1` tag of the page.
```css
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 10px 30px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #f5f5ff;
}

h1 {
  text-align: center;
  margin: 10px 0 50px;
}
```

After that, we apply some styles to our container `div`, helping to properly align the textarea and the progress bar in the container.
```css
#container {
  display: grid;
  background-color: white;
  border-radius: 20px;
  box-shadow: 1px 1px 12px #aaa;
  padding: 40px;
  font-size: 13px;
  margin-bottom: 70px;
}
```

Next up, we style the `label` and `texarea` field along with its focus state.
```css
label {
  font-size: 15px;
  font-weight: bold;
}

textarea {
  resize: none;
  padding: 10px;
  margin: 10px 0;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 1.3px;
  border-radius: 5px;
}

textarea:focus {
  outline: 1px solid rgb(14, 51, 14);
}
```

Following that, we style the progress bar and the `remaining-chars` element, which will be used to display how many characters are left to use.
```css
#progress {
  width: 100%;
  height: 7px;
  box-shadow: inset 1px 1px 2px #ccc;
  border: 1px solid #bbb;
  border-radius: 15px;
}

#progress-bar {
  height: 100%;
}

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

That concludes our CSS file. Now, let's delve into the exciting part: making our limit indicator functional.

## Implementing the limit indicator with JavaScript
Inside our JS file, we want to first get the elements we will be working with later on.
```javascript
const textarea = document.getElementById("txt");
const progressBar = document.getElementById("progress-bar");
const remChars = document.getElementById("remaining-chars");
```

Next, we create the character counter function.
```javascript
function charCounter(inputField) {
  // Counter logic goes in here
}
```

Inside this function, we create 3 new variables, one to get the `maxlength` attribute of the input field we are targeting, the other to store the current character length in the text field, and the third to calculate the progress width according to the text field’s max length and current length.
```javascript
const maxLength = inputField.getAttribute("maxlength");
const currentLength = inputField.value.length;
const progressWidth = (currentLength / maxLength) * 100;
```

Next, we set the width of the progress bar to the value of the `progressWidth` variable. This adjusts the width percentage in line with the number of characters available in the text field.
```javascript
progressBar.style.width = `${progressWidth}%`;
remChars.style.display = "none";
```

After that, we set the background color of the progress bar according to the value of the `progressWidth` variable, setting it to green if the value is less than or equal to 60, orange if the value is greater than 60 but less than 85, and if the value is 85 or greater we set it to red and display how many characters are left to use.
```javascript
if (progressWidth <= 60) {
    progressBar.style.backgroundColor = "rgb(19, 160, 19)";
  } else if (progressWidth > 60 && progressWidth < 85) {
    progressBar.style.backgroundColor = "rgb(236, 157, 8)";
  } else {
    progressBar.style.backgroundColor = "rgb(241, 9, 9)";
    remChars.innerHTML = `${maxLength - currentLength} characters left`;
    remChars.style.display = "block";
  }
}
```

Now that we are done creating our character counter function, let's add an `oninput` event listener to listen for each character entered into the `textarea` field. 
```javascript
textarea.oninput = () => charCounter(textarea);
```

After calling the function, each time a character is entered in or out of the textarea field, the progress bar width updates to show how much character space is left for use.

## Conclusion

With this guide, you will be able to seamlessly include a character limit indicator in your next project, helping to improve the overall user communication experience in your application.

That's all for this article. You can check out the complete implementation of this project in the codepen below:
{% codepen https://codepen.io/sarah-okolo/pen/KKYXPvW %}

Also, if you're looking for a way to apply this to multiple textareas in your document, I have covered that in the comment section below. You can simply scroll down to [check it out](https://dev.to/sarahokolo/comment/2e850).

If there is a tutorial you would like me to cover, please don't hesitate to leave it in the comment sections. Till then, happy coding!😊