Word and Character counter :
If you are searching for a simple and best JavaScript project for practice or fun then, this place is right for you guys. On this page, you will get simple and best word counter JavaScript code.
Word counter JavaScript is used to count the number of words from the given sentence or the paragraph. This script counts both the words and characters with empty spaces.
Features :
• Good Design
• Easy to use
• Accurately count the words and characters.
Code:
HTML Code:
<!-- Making word counter using HTML, CSS, and javascript -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
<link rel="stylesheet" href="wordStyle.css">
</head>
<body>
<h1>Word Counter</h1>
<div id="container">
<div id="counter">
<p>Words <br><span class="text" id="word">0</span></p>
<p>Characters <br><span class="text" id="char">0</span></p>
</div>
<textarea id="Textarea" placeholder="Enter your text or copy and paste your text" cols="30" rows="10"></textarea>
</div>
<script src="js/wordScript.js"></script>
</body>
</html>
CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
body{
margin: 40px;
padding: 50px, 100px;
background-color: #f9f7f6;
font-family: 'Kanit', sans-serif;
}
h1{
text-align: center;
}
#container{
margin: 0px 200px 0px 200px;
text-align: center;
border: 1px solid black;
border-radius: 13px;
}
#counter{
margin: 5px;
border-radius: 15px;
background: linear-gradient(145deg, #e0dedd, #ffffff);
box-shadow: 5px 5px 10px #b6b4b4,
-5px -5px 10px #ffffff;
}
p{
display: inline-block;
margin-left: 60px;
margin-right: 40px;
font-size: 20px;
font-weight: bold;
}
.text{
font-size: 20px;
color: #4399ff;
font-weight: bold;
}
#Textarea{
margin: 10px;
padding: 3px;
width: 97%;
font-family: 'Kanit', sans-serif;
}
JS Code:
let Textarea = document.getElementById('Textarea');
Textarea.addEventListener('input', function(){
let string = this.value;
document.getElementById('char').innerHTML = string.length;
string = string.trim(" ");
let word = string.split(" ");
let clean = word.filter(function(e){
return e != "";
})
document.getElementById('word').innerHTML = clean.length;
});
Output:
Do you want to make a gradient glowing button using HTML and CSS then click link.
Post a Comment
You are welcome to share your ideas with me in the comments!