Javascript How To Count Words tool coding for your Blogger

How To Count Words Blogger tool code JS, HTML, and CSS with example ar3school


In this post you will learn how to create a simple web page word counter or add for your blogger with an input box for the user to enter a sentence and an output box to display the word count, you can use simple HTML, JAVASCRIPT, and CSS for the structure, and JavaScript for handling the logic.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Count</title>
    <style>
        #result {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <label for="inputText">Enter a sentence:</label>
    <input type="text" id="inputText" placeholder="Type a sentence...">
    <button onclick="countWords()">Count Words</button>

    <div id="result"></div>

    <script>
        function countWords() {
            // Get the input text
            var inputText = document.getElementById("inputText").value;

            // Count words
            var wordCount = 0;
            if (inputText.trim() !== "") {
                var words = inputText.split(/\s+/);
                wordCount = words.length;
            }

            // Display result
            var resultDiv = document.getElementById("result");
            resultDiv.innerHTML = "Word count: " + wordCount;
        }
    </script>
</body>
</html>
Output:


Word Count

In this example: The HTML structure includes an input box, a button, and a result div. The JavaScript function countWords() is triggered when the button is clicked. The function gets the input text, counts the words, and updates the result div with the word count. You can save this code in an HTML file and open it in a web browser. When you type a sentence into the input box and click the "Count Words" button, the word count will be displayed below.

Comments :

Post a Comment