Word counting web application

 This word counting website is a straightforward web application that permits clients to enter a text in a textarea and include the quantity of words in it. The UI comprises of a header with the site's name, a fundamental segment with a textarea for input and a button to set off the word count, and a section component to show the word count.


The JavaScript code of the site utilizes a customary articulation to part the information text into a variety of words and afterward includes the quantity of components in the cluster to decide the word count. The word count is then shown to the client in the passage component.


This site can be valuable for various purposes, for example, really taking a look at the length of a composed report, working out the quantity of words in a paper or article, or confirming that a tweet or other web-based entertainment post meets a word count limit. Generally speaking, this word counting site gives a straightforward and easy to understand method for including the quantity of words in a text.



HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Word Count</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<header>

<h1>Word Count</h1>

</header>

<main>

<textarea id="input"></textarea>

<button id="countBtn">Count Words</button>

<p id="count"></p>

</main>

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

</body>

</html>




CSS


body {
 font-family: sans-serif;
 background-color: #f8f8f8;
}
header {
 background-color: #333;
 color: white;
 padding: 20px;
}
main {
 padding: 20px;
}
textarea {
 width: 100%;
 height: 200px;
 padding: 10px;
 box-sizing: border-box;
 border: 1px solid #ccc;
 border-radius: 5px;
 margin-bottom: 20px;
}
button {
 background-color: #333;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}
button:hover {
 background-color: #555;
}
p {
 font-size: 24px;
 font-weight: bold;
}




JAVASCRIPT

const countWords = () => {
  const inputText = document.getElementById('input').value.trim();
  const wordCount = inputText.split(/\s+/).length;
  document.getElementById('count').innerHTML = `Word count: ${wordCount}`;
};

document.getElementById('countBtn').addEventListener('click', countWords);


Comments

Post a Comment