Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Tell us what’s happening:

i can’t pass test 2 & 3, can someone tell me what’s wrong please.

Capture
Capture318×206 8.16 KB

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

<body>
    <div>
        <p class="title">Real Time Character Counter</p>
        <textarea id="text-input" placeholder="Type something..."></textarea>
        <p id="char-count">Character Count: 0/50</p>
    </div>
    <script src="script.js"></script>
</body>


</html>

/* file: styles.css */
html {
  color: grey;
  background: black;
}

body {
  display: flex;
  align-items: center;
  height: 90dvh;
  padding-inline: 1.75rem;
}

div {
  font: 1.35rem Consolas;
  width: 100%;
  height: 40dvh;
  display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(46, 48, 51);
  border-radius: 5px;
}

.title {
  background-color: rgb(157, 117, 199);
  color: rgb(20, 20, 20);
  padding: 2px;
  border-radius: 5px;
}

#text-input {
  padding: 0.45em;
  line-height: 1.75em;
  font: 1rem Arial;
  color: white;
  height: calc((16px * 3) + 9px);
  background-color: black;
}

#char-count {
  font: 1rem;
}

/* file: script.js */
const inputArea = document.getElementById("text-input");

const charCount = document.getElementById("char-count");

inputArea.addEventListener("input", () => {
  let theContent = inputArea.value;
  let count = theContent.length;
  
  if (count <= 50) {
    charCount.textContent = "Character Count: " + String(count) + "/50";
  }

  if (count === 50) {
    charCount.style.color = "red";
  }

  inputArea.value = theContent.slice(0, 50);
})

Your browser information:

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

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

Looks like tests are mistakenly checking your other p element. Would you be interested in creating issue for this problem in the freeCodeCamp’s GitHub repository?

3

I’ve created an issue on github.

4

I would argue that this is not an issue, since the instructions did not ask for a p element with a title class.

5

Usually in such situation it’s explicit that only single such element should exist. From my point of view it could go two way:

  • tests correctly should assume only one p element should exist, in such case some adjustments to instructions would be good.
  • tests should be narrowed down to target the right p.
1 Like