Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

Hello, I can’t get this to pass the tests, could anyone help me? I know the instructions say use a JS only solution but I’ve used the maxLength JS method not an HTML one. Is this the issue?

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>
<main>
<h1>Text Character Counter</h1> 
	<div class = "container">
			<div class = "form">
					<textarea id = "text-input" ></textarea>
			</div>
					<p id = "char-count">Character Count: <span id = "counter">0</span>/50 </p>
					</div>
</main>
<script src = "script.js"></script> 
</body>

</html>

/* file: styles.css */
:root{ 
background-color: darkcyan; 
color: white; 
font-family: tahoma, sans-serif; 
}

.container{ 
border: white solid 1px;  
width: 50vw; 
height: 50vh; 
text-align: center; 
margin: auto; 
padding: 25px; 
}

h1{
margin: auto; 
padding: 25px; 
text-align: center; 
}

#text-input{ 
width: 75%;
height: 75%;
padding: 15px; 
resize: none; 
}

/* file: script.js */
const box = document.getElementById("text-input");
const counter = document.getElementById("counter");
const countText = document.getElementById("char-count");
let count = 0;

box.addEventListener("input", ()=> {

box.maxLength = 50;
count = (box.value.length); 

if (count <= 50){
countText.style.color = "white";
  if (count >= 50){
    countText.style.color = "red";
  };
counter.innerText = count; 
};

});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:138.0) Gecko/20100101 Firefox/138.0

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

Write out over 50 characters in a different text editor and copy/paste them into the textarea.

Your program should remove the extra characters.

If you add a console.log() you can see that the tests do this:

console.log(box.value.length)
3

Thanks for this.
Yeah when I copy/paste a tract of text from another editor it removes all of the characters after character 50… isn’t that what it should do?

4

You’re right I’m not able to paste that in.

Did you try adding the console.log and running the tests? The tests still insert more than 50 characters.

5

So the tests log values of:
11, 50 and then 62.

However it doesn’t log the input text so I can’t try it myself, and I can’t replicate it with my own copy and pasted text. It’s very odd.

I’m not sure what it is using to get the 62.

Edit:

I just entered a block of text, and the value registered at 595, even though it only allowed 50 characters to display, and changed the inner text of the element to 50.

box.value.maxLength should have been before the event listener. When I do this, the block of text correctly limits to 50 and registers this as the length, but the final test still fails…

6

The test isn’t typing it in normally. Maybe it does something like this:

box.value = "This is a super long sentence with many more than fifty characters This is a super long sentence with many more than fifty characters This is a super long sentence with many more than fifty characters "

Put the console.log at the end of your function. It should be <= 50 by the end

if (count <= 50){
  
countText.style.color = "white";
  if (count >= 50){
    countText.style.color = "red";
  };
counter.innerText = count; 
};
console.log(box.value.length)

11
11
50
50
62
62

box.value.length remains at 62 by the end.

7

Ack, I’m giving up and calling it a ‘sort-of-win’ :slight_smile: Thanks for the help!

Yeah that gives me 62 too. But still not sure why. :thinking:

I can’t replicate the error. I guess the answer would be to push the text to an array and slice it? But seems like a super long-winded way to do it, especially if you need to delete and have it respond?