Build a Real Time Counter - Build a Real Time Counter

JavaScript
1

Hello there, although I tried diffrent approaches, i cant pass the following test:

Failed: 5. When the character count is 50, the text should be displayed in red.

In the previes the text is clearly red. Does anyone know how i can fix taht.

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 Character Counter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Real-Time Character Counter</h1>
    <textarea id="text-input" placeholder="Type something..."></textarea>
    <p id="char-count">Character Count: 0/50</p>

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

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

function updateCharacterCount() {
    const text = textInput.value;
    const count = text.length;

    if (count > 50) {
        textInput.value = text.substring(0, 50); // Truncate to exactly 50 characters
    }

    const updatedCount = textInput.value.length; // Use truncated text length
    charCount.textContent = `Character Count: ${updatedCount}/50`;

    if (updatedCount >= 50) {
        charCount.classList.add("red");
    } else {
        charCount.classList.remove("red");
    }
}

textInput.addEventListener("input", updateCharacterCount);

updateCharacterCount();

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

h1 {
    color: #333;
}

textarea {
    width: 300px;
    height: 150px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    resize: none;
    margin-bottom: 20px;
}

#char-count {
    font-size: 18px;
    color: #333;
}

#char-count.red {
    color: red;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Build a Real Time Counter - Build a Real Time Counter

2

Your code is correct.

The problem is that the tests expect you to use the style property instead.
They consider other ways as incorrect.

I have opened an issue on GitHub about it.

3

Oh ok great thanks it worked now…