Tell us what’s happening:
Hello! I passed this lab even though I can still get the count to go beyond 50 . Eg. The counter can go up to 60 if I copy/paste the following set of characters into the text area six times: 123456789x. Can someone please let me know why this is happening, even though I passed the test? Thanks!
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>
<header>
<h1>Real-Time Character Counter</h1>
</header>
<main>
<textarea id="text-input" placeholder="Type something..."></textarea>
<p id="char-count">Character Count: 0/50</p>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
* {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
body {
background-color: thistle;
width: 100%;
height: 100vh;
font-family: arial, sans-serif;
}
header {
background-color: palegreen;
padding: 2% 4%;
line-height: 0;
}
textarea {
margin-top: 10%;
width: 30vw;
height: 20vh;
resize: none;
padding: 5%;
border-radius: 0.5rem;
font-size: 1rem;
}
p {
color: purple;
font-weight: bold;
font-size: 1.25rem;
}
/* file: script.js */
const textInput = document.getElementById("text-input");
const charCount = document.getElementById("char-count");
textInput.addEventListener("input", () => {
const currentLength = textInput.value.length;
charCount.textContent = `Character Count: ${currentLength}/50`
if (currentLength > 49) {
charCount.style.color = "red";
textInput.value = textInput.value.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/149.0.0.0 Safari/537.36
Challenge Information:
Build a Real Time Counter - Build a Real Time Counter
