Welcome to this blog post where I’ll be sharing WordPress tutorial on creating a fully responsive single-page word counter tool website using WordPress. Through some simple yet effective techniques, I’ll walk you through the process. Additionally, I’ll cover the entire design process using “Elementor”. The best part? You can create this website for free! Make sure to read till the end of the blog post as it promises to be both informative and engaging. Let’s dive in and explore the exciting world of website creation together!”
How to Integrate ACF in Elementor | WordPress Tutorial 2024
Themes & Plugins Used
Below is the list of Themes and Plugins that we have used in this kind of WordPress website
1. Astra
The Astra theme stands out as a versatile and lightweight option for WordPress users, renowned for its exceptional speed, flexibility, and extensive customization options. Its user-friendly interface and compatibility with popular page builders make it an ideal choice for creating stunning websites with ease.
2. Elementor
Elementor is a powerful drag-and-drop page builder plugin for WordPress, empowering users to design and customize websites visually, without needing to write any code. With its intuitive interface and extensive library of widgets and templates, Elementor revolutionizes the website building experience, enabling users to create professional-looking websites quickly and efficiently
3. Pro Elements
Pro Elements is an extension of WordPress that unlocks all the advanced features of Elementor.
Word Counter HTML Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Word Counter</h1>
<p>Enter your text below:</p>
<textarea id="inputText" placeholder="Type your text here..."></textarea>
<div class="table-container">
<table>
<tr>
<th>Statistic</th>
<th>Count</th>
</tr>
<tr>
<td>Total words</td>
<td id="totalWords">0</td>
</tr>
<tr>
<td>Total characters (with spaces)</td>
<td id="totalCharsWithSpaces">0</td>
</tr>
<tr>
<td>Total characters (without spaces)</td>
<td id="totalCharsWithoutSpaces">0</td>
</tr>
<tr>
<td>Total sentences</td>
<td id="totalSentences">0</td>
</tr>
<tr>
<td>Total paragraphs</td>
<td id="totalParagraphs">0</td>
</tr>
<tr>
<td>Avg. words per sentence</td>
<td id="wordDensity">0</td>
</tr>
<tr>
<td>Top 5 Word Density</td>
<td id="topWordDensity"></td>
</tr>
</table>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
border: 1px solid #ddd;
}
table, th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #FFCD4B;
}
textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
transition: box-shadow 0.3s;
}
textarea:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}Javascript
const inputText = document.getElementById("inputText");
const totalWords = document.getElementById("totalWords");
const totalCharsWithSpaces = document.getElementById("totalCharsWithSpaces");
const totalCharsWithoutSpaces = document.getElementById("totalCharsWithoutSpaces");
const totalSentences = document.getElementById("totalSentences");
const totalParagraphs = document.getElementById("totalParagraphs");
const wordDensity = document.getElementById("wordDensity");
const topWordDensity = document.getElementById("topWordDensity");
inputText.addEventListener("input", updateCounts);
function updateCounts() {
const text = inputText.value;
const words = text.trim().split(/\s+/);
const charsWithSpaces = text.length;
const charsWithoutSpaces = text.replace(/\s/g, "").length;
const sentences = text.split(/[.!?]/).filter(sentence => sentence.trim() !== "").length;
const paragraphs = text.split('\n\n').filter(paragraph => paragraph.trim() !== "").length;
const averageWordsPerSentence = words.length / sentences;
totalWords.textContent = words.length;
totalCharsWithSpaces.textContent = charsWithSpaces;
totalCharsWithoutSpaces.textContent = charsWithoutSpaces;
totalSentences.textContent = sentences;
totalParagraphs.textContent = paragraphs;
wordDensity.textContent = averageWordsPerSentence.toFixed(2);
const wordFrequency = calculateWordFrequency(words);
const topWords = getTopWords(wordFrequency, 5);
topWordDensity.textContent = topWords.map(word => `${word[0]} (${word[1]} times)`).join(', ');
}
function calculateWordFrequency(words) {
const wordFrequency = {};
for (const word of words) {
if (word in wordFrequency) {
wordFrequency[word]++;
} else {
wordFrequency[word] = 1;
}
}
return wordFrequency;
}
function getTopWords(wordFrequency, count) {
const sortedWords = Object.entries(wordFrequency).sort((a, b) => b[1] - a[1]);
return sortedWords.slice(0, count);
}