How to make a Word Counter tool website using Chat GPT.

By

Hello friends, in this article we are giving you the code of the word counter tool website. This code is written in HTML CSS & Javascript. Below you will find its code. You can copy it and create a word counter website for yourself. Thank you

HTML, CSS, and Javascript Code of the word counter tool

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Word Counter</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <header>
         <h1>Word Counter</h1>
      </header>
      <main>
         <div id="input-area">
            <textarea id="input" rows="10" cols="50"></textarea>
            <button id="count-btn">Count Words</button>
         </div>
         <div id="result"></div>
      </main>
      <footer>
         <p>Copyright © 2022 Word Counter.
      </footer>
      <script src="script.js"></script>
   </body>
</html>

body {
    margin: 0;
    font-family: Arial, sans-serif;
 }
 header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
 }
 header h1 {
    margin: 0;
 }
 main {
    padding: 20px;
 }
 #input-area {
    margin-bottom: 20px;
 }
 #result {
    font-size: 20px;
    font-weight: bold;
 }
 footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
 }
 
const input = document.getElementById('input');
const countBtn = document.getElementById('count-btn');
const result = document.getElementById('result');

countBtn.addEventListener('click', () => {
   const text = input.value.trim();
   const words = text.split(/\s+/);
   result.textContent = `Word Count: ${words.length}`;
});

Related Posts