Tell us what’s happening:
I need help. My Code doesn’t pass the following tests, even though my output and behavior are compliant:
-
When the #text-input element (textarea) contains the text ‘hello coder’ the #char-count element should contain the text “Character Count: 11/50”
-
When the character count is 50, the text should be displayed in red.
-
If character count is greater than or equal to 50, the user shouldn’t be able to enter more characters.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Time Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<textarea id="text-input"></textarea>
<p id="char-count">Character Count: 0/50</p>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const textInput = document.getElementById("text-input");
const charCount = document.getElementById("char-count");
const maxCharacters = 50;
textInput.addEventListener("keyup", function() {
let charactersArray = textInput.value.split('');
let charactersAmount = charactersArray.length;
if (charactersAmount >= maxCharacters) {
charCount.style.color = "red";
textInput.disabled = true;
}
charCount.textContent = `Character Count: ${charactersAmount}/50`;
});
/* file: styles.css */
#char-count {
color: black;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0
Challenge Information:
Build a Real Time Counter - Build a Real Time Counter