Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

I cant pass test 4, however i am getting the required output on the preview

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>

<h1>Real Time Character Counter</h1>
<textarea id="text-input" placeholder="Type Something"
rows="10"
cols="40">
    
</textarea>
<p id="char-count">Character Count: 0/50</p>

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

/* file: styles.css */
h1{
 font-size:25px;
 font-family:arial,sans-serif;
 color:navy;
 margin-top:100px;
 text-align:center;
}


body{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#text-input{ 
  border: 3px grey solid;
  border-radius:5px;
}

#char-count{
  font-size:17px;
  font-family:arial,sans-serif;
  font-style:italic;
  color:blue;
  font-weight:bold;
}




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

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

const count = inputString.value.length

if(count < 50){
countElement.textContent = 
`Character count: ${count}/50`;
countElement.style.color ="blue";
}

else if(count === 50){
countElement.textContent = 
`Character count: ${count}/50`;  
countElement.style.color ="red";
}

else{
inputString.value=inputString.value.slice(0,50);
countElement.style.color ="red";
}

})

Your browser information:

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

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

I get an incorrect output when I try the failing test with your code:

untitled
untitled461×700 17.3 KB

Your cursor doesn’t start at the beginning of the textarea element for one thing. Have a look at your HTML to find out why.

Secondly, ensure that your #char-count element displays not only the correct number but also exactly the correct text.

1 Like
3

thank you, i was using lowercase c for count in the #char-count output.

1 Like