Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

I’m failing tests 4 through 6:
4. When the #text-input element contains the text hello coder the #char-count element should contain the text “Character Count: 11/50”
5. When the character count is 50, the text should be displayed in red.
6. If character count is greater than or equal to 50, the user shouldn’t be able to enter more characters.

I’ve tested each of these scenarios in my program and I believe my program meets each of these requirements. I reviewed the forum and saw several posts about the greater than 50-character issue and attempted to solve it with a slice, but that’s not working either. Any help is appreciated. Thanks in advance.

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" />
    <style></style>
    <link rel="stylesheet" href="styles.css" />
    <title>Real Time Counter</title>
  </head>

  <body>
    <div>
      <h1>Real-Time Character Counter</h1>
      <textarea id="text-input" rows="4" maxlength="50"></textarea>
      <p id="char-count">
        Character Count: <span id="char-count-number">0</span>/50
      </p>
    </div>

    <script src="script.js"></script>
  </body>
</html>


/* file: script.js */
const textArea = document.querySelector("#text-input");
const currentNumSpan = document.querySelector("#char-count-number");
const countPara = document.querySelector("#char-count");

let textAreaString = "";
let textAreaLength = 0;
let currentNumChars = 0;

textArea.addEventListener("keyup", () => {
  textAreaString = textArea.value;
  console.log(textAreaString);
  textAreaLength = textAreaString.length;
  console.log(textAreaLength);
  currentNumSpan.textContent = textAreaLength;
  if (textAreaLength >= 50) {
    countPara.style.color = "red";
    textArea.value.slice(49); // for string injection
  }
  else countPara.style.color = "black";
});


/* file: styles.css */
body {
  background-color: lightgray;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  width: 75%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1 {
  color: blue;
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

You will need to use a different event type in the event listener, it doesn’t catch situations like rigth-clicking and pasting in the input.

You should use events related to the input, not to keyboard keys

3

@ILM,

Thank you. I switched ‘keyup’ to ‘input’ and I’m now passing tests 1-5, but still not passing test 6. Other than the event change, my JS is the same.

I try to handle the greater than 50-character issues using an array slice and a maxlength on the text area but that isn’t working. Any hint on how to pass this final test?

Here is my new JS. The HTML and CSS are the same as above.

// console.log("connected");

const textArea = document.querySelector("#text-input");
const currentNumSpan = document.querySelector("#char-count-number");
const countPara = document.querySelector("#char-count");

let textAreaString = "";
let textAreaLength = 0;
let currentNumChars = 0;

textArea.addEventListener("input", () => {
  textAreaString = textArea.value;
  console.log(textAreaString);
  textAreaLength = textAreaString.length;
  console.log(textAreaLength);
  currentNumSpan.textContent = textAreaLength;
  if (textAreaLength >= 50) {
    countPara.style.color = "red";
    textArea.value.slice(49);
  } else countPara.style.color = "black";
});
4

Here’s a good JavaScript reference:

MDN JavaScript Reference

Please take a look at how the String.prototype.slice() should be used.

5

In addition to what @fcc4b6d10c4-b540-4e2 mentioned about the slice() method,
try removing the maxlength attribute from your textarea element in HTML.

You’ll see that you can still type more than 50 characters.

6

@fcc4b6d10c4-b540-4e2 Thank you for that. I was confusing array.slice vs string.slice and they are very different.

@MostafaElbadry I don’t understand. Having a maxlength blocks additional input per the requirements. I agree with you that removing it allows more than 50 characters. But I’m confused why I would remove it since the result is the opposite of the requirements, right?

7

Because you should handle that using JavaScript without relying on the maxlength attribute.

That’s basically how the tests work.

If your code is right, it doesn’t matter whether you used it or not.
I told you to try it to show that your JavaScript isn’t complete yet.

8

Despite not understanding why, I did follow your advice and removed the maxlength. I rewrote my JS. It appears to work property but I’m still not passing the tests. Any advice on how to make the JS pass the test? My JS now looks like this:

const textArea = document.querySelector("#text-input");
const currentNumSpan = document.querySelector("#char-count-number");
const countPara = document.querySelector("#char-count");

let textAreaString = "";
let textAreaLength = 0;
let currentNumChars = 0;

textArea.addEventListener("input", () => {
  textAreaString = textArea.value;
  textAreaLength = textAreaString.length;
  currentNumSpan.textContent = textAreaLength;
  if (textAreaLength >= 50) {
    countPara.style.color = "red";
    textArea.value = textArea.value.slice(0, 49);
  } else countPara.style.color = "black";
});
9

That makes sense. Thank you. I removed “maxlength” property and am dealing with the characters in the JS.

10

Will that get 50 characters ?
In other words, is the second index inclusive or exclusive ?

1 Like
11

The first index is inclusive, the second index is not. :upside_down_face:. After fixing the slice function, I was able to pass the test. Thank you for your help and patience.

1 Like