Tell us what’s happening:
There is something wrong witht he platform, the preview is not displaying the css at all,
also my code meets all the requirements as I have checked here: Count characters in text area - JSFiddle - Code Playground
but still getting the 5th and 6th step failed.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Time Counter</title>
</head>
<body>
<h1>Real-Time Character Counter</h1>
<textarea type="text"
maxLength="50"
id="text-input"
name="characterInput">
</textarea>
<p id="char-count">Character Count: 0/50</p>
<script src="./script.js"> </script>
</body>
</html>
/* file: script.js */
document.addEventListener("DOMContentLoaded", function() {
const textInput = document.getElementById("text-input");
const charCount = document.getElementById("char-count");
const maxChars = 50;
textInput.addEventListener("input", function() {
let currentLength = textInput.value.length;
charCount.textContent = `Character Count: ${currentLength}/${maxChars}`;
if (currentLength >= maxChars) {
charCount.classList.add("limit-reached");
} else {
charCount.classList.remove("limit-reached");
}
});
});
/* file: styles.css */
h1{
text-align: center
}
textarea {
width: 80%;
display: block;
margin: 0 auto;
}
#char-count {
font-size: 20px;
text-align: center
}
.limit-reached {
color: red;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Challenge Information:
Build a Real Time Counter - Build a Real Time Counter