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