How to Create a Simple Word Counter Tool from ChatGPT
After Launched of ChatGPT, approx. every industry is disturbing but guys of these Industries also using ChatGPT cause it makes them smart.
Like so, SEOs, Graphic Designer, Web Engineers, and Content Creator are benefiting with ChatGPT.
By using ChatGPT you can write content for your website, social media posts, and you are also able to create a book that is very easy there is not need to be a content writer or book author.
And on other hand you can also write code for your project but this time you have to need to know that how to implement the code.
So, I’m not a Web Developer but just was trying to make few small website tools for fun. And I created approx. 16 small tools and a Word Counter tool is one of them that is going to be share with you.
I’ll share you further 15 tools with time to time.
And in this short story I’m gonna share you the full script of this Word Counter tool.
Sounds good?
To making Word Counter tool, I have to created HTML, CSS, and Javascript codes.
HTML creates structure of any website. CSS makes beautiful to a website. And JavaScript uses for implementation of feartures.
I want to give you a quick overview of Word Counter Tool Website.
When I’ve completed my content for my websites then I access any Word Counter Tool to check how many words I wrote and every writer counts words of their piece of content cause sometimes it’s necessary more words to rank on Google. But I don’t count words for my Medium Story because if you want to check word counts on Medium Story just press Ctrl + A, you’ll see upper left corner of your screen that how many words are in your story.
So, I was talking about Word Counter Website. These type of tools making very good money as before I said every writer needs to be check their content’s words. Which website I use to count words, they have 5.5 million visitors per month and they are earning with Google AdSense, also getting sponsorships with other businesses, and I analyzed they are earning with Affiliate Marketing too, it means the website making lots of $$$$$$ per month.
Now, we’ll learn how to create a simple Word Counting Tool from ChatGPT.
Are you opened ChatGPT?
Ask ChatGPT:
“I want you to create Word Counter: Count the number of words in a given text tool website which only based on HTML, CSS, and JAVASCRIPT, please create me a beautiful Word Counter tool website codes with beautiful UI and user navigational friendly and 100% functionalize Word Counter tool website.”
It’s ChatGPT turn, after completing the process you’ll see ChatGPT given you HTML, CSS, and JavaScript codes one by one.
This one more process you can process to ChatGPT after first one process has completed but this is an optional process and can make you easy with your generated code.
Ask ChatGPT:
“Please merge all the codes into a single html file.”
ChatGPT will merge all (HTML, CSS, JavaScript) codes into a single HTML file this will lead you to copy and paste this code into a code editor means implementation of your code just need to copy paste work.
How simple?
For Implementation process, open any code editor as I use Visual Studio Code (VS Code).
We’ll choose “New File” from file option (as mentioned in image)
After that, We’ll again go to ChatGPT and copy the code.
After copy the code, we’ll go to the code editor and paste the copied code.
Now, we need to save our file with any name, I write the name “Word Counter Tool”.
Our all the step by step process has been completed. But main thing is also on pending that checking of our tool, is it working or not?
I’ll open the file on my browser and will check is it working or not?
We’re able to see my small Word Counter Tool is working but what about yours?
If your tool is working just comment on the story and let me know.
For some people this tool is seems to be a stange alien but the reason behind this is CSS. If you give more prompts to ChatGPT to make this tool more user friendly, eye-catchy, and best UI you’ll get more refine CSS code.
One more option is there for you.
If you want to add this tool on your WordPress website so, make a beautiful custom page with Elementor plugin and add this tool on the page, change colors and set the width and height from the CSS code. Trust me you can do this without hiring a Developer. Check CSS code there you can see height and width and colors which are using in the tool.
This is what I want to share with you. If you’re new to my story you can check my profile, Now a days I’m writing related to Prompt topic and this story also a part of them.
My valued audience, I’m also attaching all codes for your help that I’ve generated from ChatGPT for a functional Word Counter Tool below.
If only reads my stories and still not following me please follow me and clap the story.
I’ll meet you again in a new story with a fantastic topic.
Functional Word Counter Tool’s Full Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
#wordCount {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Word Counter</h1>
<textarea id="inputText" placeholder="Enter your text here"></textarea>
<button id="countButton">Count Words</button>
<p id="wordCount">Word Count: 0</p>
</div>
<script>
const countButton = document.getElementById("countButton");
const inputText = document.getElementById("inputText");
const wordCountDisplay = document.getElementById("wordCount");
countButton.addEventListener("click", () => {
const text = inputText.value.trim();
const words = text.split(/\s+/).filter(word => word !== "");
const wordCount = words.length;
wordCountDisplay.textContent = `Word Count: ${wordCount}`;
});
</script>
</body>
</html>