HTML Code of Word & character counter :
Word & Character Counter HTML Code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Word and character counter</title>
<style>
*{
background-color:rgb(195,200,225);
}
h2{
text-align: center;
border: 2px solid black;
font-size: 20px;
padding: 15px 5px;
color: white;
background-color:rgb( 0,225,225);
margin: 0 ;
}
textarea{
width: 98%;
border-color:black;
background-color:white;
}
p{
border:2px solid black;
margin:0;
padding:10px 5px;
text-align:center;
background-color:rgb(0,225,195);
}
h3{
border:2px solid green;
color:yellow;
background-color:red;
padding:5px 5px;
border-radius:10px;
text-align:center;
font-size:15px;
}
</style>
</head>
<body>
<h2> Word and character counter </h2>
<textarea id="textbox" cols="30" rows="9" > </textarea>
<p>
<span id="word" > 0 </span> words and
<span id="char"> 0 </span> characters
</p>
<h3>Programmed by Devansh Mishra </h3>
<script>
let textbox = document .getElementById("textbox");
textbox .addEventListener("input", function( ) {
var text = this.value;
let char = text.length;
document .getElementById("char").innerHTML = char;
text = text.trim( );
let words = text . split(" ");
let cleanlist = words.filter(function(elm){
return elm != " ";
});
document.getElementById("word").innerHTML = cleanlist.length;
});
</script>
</body>
</html>