Character Count In Pure JavaScript

In this example below you will see how to do a Character Count In Pure JavaScript with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by raeesh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright raeesh ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Character Count  In Pure JavaScript</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="counter-box">
	<textarea onkeyup="myFunction(this.value)" placeholder="Write here..." spellcheck="true"></textarea>
	<p>Characters : <span id="counter">0</span></p>
</div>












<!-- Created By Raeesh Alam -->
<a href="https://codepen.io/raeesh/" target="_blank" style="color:#00c2c0; position: fixed; bottom: 5px; right: 5px; font-size: 15px; text-decoration: none; border: 1px solid #00c2c0; padding: 7px 14px; background: #000; font-family: Arial; letter-spacing:1px;" title="Raeesh Alam">&#10230; Raeesh Alam</a>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/raeesh/character-count-in-pure-javascript-dmyryd */
.counter-box{
	width: 100%;
	max-width: 600px;
	min-height: 100px;
	height: 90vh;
	max-height: 300px;
	display: block;
	border: 2px solid #00afb1;
	margin: 50px auto;
	position: relative;
	border-radius: 4px;
	font-family: "Arial";
	color: #fff;
}
.counter-box textarea{
	border: none;
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 15px;
	box-sizing: border-box;
	font-family: "Arial";
	color: #555555;
	font-size: 16px;
	transition: 500ms;
  resize: none;
}
.counter-box textarea:focus{
	box-shadow: inset 0px 0px 15px #00afb1;
}
.counter-box p{
	position: absolute;
	width: 180px;
	height: 35px;
	top: -35px;
	background: #00afb1;
	text-align: right;
	margin: 0px;
	right: 15px;
	font-size: 17px;
	line-height: 35px;
	border-radius: 4px 4px 0px 0px;
	padding-right: 5px;
}
.counter-box p span{
	display: inline-block;
	vertical-align: middle;
	min-width: 50px;
	text-align: left;
	font-weight: bold;
	font-size: 20px;
}

/*Downloaded from https://www.codeseek.co/raeesh/character-count-in-pure-javascript-dmyryd */
function myFunction(val) {
  document.getElementById("counter").innerHTML = val.length;
}

Comments