Word Count:
The word count is the number of words in a document or passage of text. Word counting may be needed when a text is required to stay within certain numbers of words. This may particularly be the case in academia, legal proceedings, journalism, and advertising. Word count is commonly used by translators to determine the price of a translation job. Word counts may also be used to calculate measures of readability and to measure typing and reading speeds(usually in words per minute). When converting character count to words, a measure of 5 or 6 characters to a word is generally used for English
In this post, we will use HTML, CSS, and JavaScript to make this project so let's jump into the code without wasting any time
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Word Length Calcuator</title>
</head>
<body>
<h1>Type words in the box</h1>
<input type="text" id="str">
<div id="output"></div>
<button id="btn">
<h2>Click to calculate word length</h2>
</button>
<script src="app.js"></script>
</body>
</html>
CSS:
body{
background-color:black;
text-align: center;
}
input{
margin: 100px auto 100px;
/* margin-left: 220px; */
border-radius: 50px;
width: 350px;
height: 40px;
display: block;
text-align: center;
}
#output{
margin-top: 45px;
width: 100px;
color: white;
background: gold;
margin: 100px auto 100px;
}
#btn{
width: 350px;
height: 80px;
color: #fff;
background-color:red;
border-style: none;
border-radius: 15px;
margin-top: 100px;
/* margin-left: 385px; */
}
h1{
color: white;
margin-top: 50px;
}
JavaScript:
let button = document.getElementById('btn');
button.addEventListener('click', function(){
let word = document.getElementById('str').value;
let count = word.length;
let outputDiv = document.getElementById('output');
outputDiv.innerHTML = `<h1>${count}</h1>`
});
Comments
Post a Comment