Tell us what’s happening:
The 6th condition is not passing:
I have tried setting the attribute of html element to maxlength.
I tried disabling textarea when condition is reached.
Also the truncating method currently in the code.
None of this works and its not passing even though it works when I try it manually.
Any help would be great.
Thank You.
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 Counter</title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Character Counter</h1>
<main>
<textarea id = "text-input" rows = "8" cols = "50" placeholder = "Type Something..." maxlength = "50"></textarea>
<p id = "char-count" >Character Count: 0/50</p>
</main>
<script src = "script.js"></script>
</body>
</html>
/* file: styles.css */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
background: rgb(221, 233, 193)
}
h1 {
margin-top: 10vh;
text-align: center;
font-family: arial;
}
textarea {
margin: 10vh;
background: white;
}
p {
text-align: center;
font-family: sans-serif;
}
.para {
color:red;
text-align: center;
font-family: sans-serif;
}
/* file: script.js */
let text = document.getElementById("text-input");
let para = document.getElementById("char-count");
const updateFunc = () => {
para.textContent = "Character Count: " + text.value.length + "/50";
if (text.value.length >= 50) {
para.classList.add("para");
text.value = text.value.substring(0, 49);
} else {
para.classList.remove("para");
}
}
text.addEventListener('input', () => {
updateFunc();
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Challenge Information:
Build a Real Time Counter - Build a Real Time Counter