Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

The code seems to working properly but I am not passing tests 4, 5, and 6. I would just like to pointed in the right direction of what could be going wrong. Thank you! :slight_smile:

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 href="styles.css" rel="stylesheet">
</head>

<body>
    <textarea id="text-input" rows="8" cols="30"></textarea>
    <p id="char-count">Character Count: 0/50</p>

</body>

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

/* file: styles.css */
body {
  background-color: #759192;
  font-family: sans-serif;
  font-weight: bold;
}



/* file: script.js */
const textArea = document.getElementById("text-input");
const charCount = document.getElementById("char-count");



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

  let textLength = textArea.value.length
  for(let i = 0; textLength <= 49; i++){
   textLength++
  if(textLength >= 50){
    textArea.disabled = true
    textArea.style.color = "red"
  }
 return charCount.innerHTML = `<p id="char-count">Character Count: ${textLength}/50</p>`
  }
 
})

Your browser information:

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

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

The issues currently are reported as:

// running tests
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.
// tests completed

So take the first issue and try to test by writing hello coder and seeing what the result is.
Does your code give 11 as described? If no, then check the lines of code that do the counting.
(debugging is just a series of small investigations. Do one at a time. If you need help for a specific thing you are debugging, please tell us how you tried to debug it and what you have found in your effort)

1 Like
3

thank you! :slight_smile: I was able to solve the 4 and 5. But I am still stuck on 6. When I test it I can’t type past 50 characters, this is currently the code I have for it. Is using “disabled” the wrong way to go or is it how I’m using it? Also I am un-sure of how to debug this step because it appears to be working fine.
if(textLength >= 50){
textArea.disabled = true
charCount.style.color = “red”
}

4

can you share your entire js code again (with all corrections made)?

enclose the code in three backticks like the example shown below (for proper formatting purposes on the forum site, this is required)

```
the three backtick characters tell the forum that you are pasting code in between
```

So 3 backticks above and below your code

5 
const textArea = document.getElementById("text-input");
const charCount = document.getElementById("char-count");



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

  let textLength = textArea.value.length
  for(let i = 0; textLength <= 50; i++){
   i++
  if(textLength >= 50){
    textArea.disabled = true
    charCount.style.color = "red"
  }
 return charCount.innerHTML = `<p id="char-count">Character Count: ${textLength}/50</p>`
  } 
 
})
6

I just realized in the example app that you can backspace and erase the characters after you hit 50 characters. In my code you can’t do that, so that may have something to do with it, i don’t know how to fix that though.

7

that didn’t quite format correctly because the backticks have to be on separate lines but I fixed it for you.

another example:
```js
code here
```

this one I added the js to tell the forum to highlight the javascript text

1 Like
8 
const textArea = document.getElementById("text-input");
const charCount = document.getElementById("char-count");



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

  let textLength = textArea.value.length
  for(let i = 0; textLength <= 50; i++){
   i++
  if(textLength >= 50){
    textArea.disabled = true
    charCount.style.color = "red"
  }
 return charCount.innerHTML = `<p id="char-count">Character Count: ${textLength}/50</p>`
  } 
 
})
1 Like
9

looks like the problem is that I can paste into your input a large paragraph and it will display it but if you try to do that to the sample project, it cuts it off at 50

10

Yeah your right, and the number on the charCount doesn’t go up at all either. I’m trying .substring to help with it, do you feel that would fix that problem or is it something else?

11

let me know how it goes when you’ve tried as I haven’t done this new curriculum myself. (I did the archived one when it was the ‘current’ one at the time)

One thought would be, if the length is over 50, grab and display the first fifty and dump the rest and maybe which ever way you pick to do that will do the trick.

1 Like
12

I was able to figure it out. I had to play around .substring but I got it. I appreciate you taking the time to help me!! Thanks so much!

1 Like
13

can I point out that the loop there does not do what you want? it is not doing any looping, do you really need it?