Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active October 15, 2021 21:57
Show Gist options
  • Save acidtone/74727a562940ead812f46c1b1b870d19 to your computer and use it in GitHub Desktop.
Save acidtone/74727a562940ead812f46c1b1b870d19 to your computer and use it in GitHub Desktop.
Download ZIP
JS Activity: Text area character counter
Raw
README.md

JS Activity: Text area character counter

In this activity you will add a dynamic counter that displays the number of characters entered into a <textarea> element.

Instructions

  1. In character-counter.js, create a textarea variable using document.querySelector().
  2. Create a counter variable for the paragraph that will hold the current character count of textarea.
  3. Using Element.getAttribute() create a limit variable that holds the max character limit defined by the maxlength attribute of the textarea element.
  4. Using Element.addEventListener() and the input event, add an event handler to textarea that updates counter every time the user types a character.
    • Hint: textarea.value has all the same methods as any other string.
Raw
character-counter.js
// 1. Create `textarea` variable
// 2. Create `counter` variable
// 3. Create character `limit` variable
// 4. Create event listener to update `counter`
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text area character counter</title>
<link rel="stylesheet" href="main.css">
<script src="character-counter.js" defer></script>
</head>
<body>
<main>
<label for="tweet">Tell us your story (140 characters or less):</label>
<textarea id="tweet" name="tweet"
rows="15" cols="40" placeholder="Tweet 140 characters or less" maxlength="140"></textarea>
<p class="counter">[count] / [max]</p>
</main>
</body>
</html>
Raw
main.css
input, textarea {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment