HTML:
<!DOCTYPE html>
<html>
<head>
<title>Word Counter Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Word Counter</h1>
<textarea id="text-input" placeholder="Enter your text here..."></textarea>
<div class="output">
<div>
<span class="label">Characters:</span>
<span id="characterCount">0</span>
</div>
<div>
<span class="label">Words:</span>
<span id="wordCount">0</span>
</div>
<div>
<span class="label">Sentences:</span>
<span id="sentenceCount">0</span>
</div>
<div>
<span class="label">Paragraphs:</span>
<span id="paragraphCount">0</span>
</div>
<div>
<span class="label">Reading Time:</span>
<span id="readingTime">0</span>
</div>
<div id="readability" class="readability">Show readability score</div>
</div>
<div class="keywords">
<h2>Top Keywords</h2>
<ul id="topKeywords"></ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
/* styles.css */
/* Add your existing CSS styles here */
/* Additional CSS for enhanced version */
body {
font-family: 'Source Sans Pro', sans-serif;
color: #111;
background-color: #FAFAFA;
width: 700px;
margin: 0 auto;
}
.container {
margin: 2% auto;
padding: 15px;
background-color: #FFFFFF;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3rem;
font-weight: 900;
text-align: center;
margin: 1% 0 3%;
}
textarea {
width: 100%;
height: 250px;
padding: 10px;
border: 1px solid #d9d9d9;
outline: none;
font-size: 1rem;
resize: none;
line-height: 1.5rem;
}
.output {
display: flex;
justify-content: space-between;
margin: 1% 0;
border: 1px solid #DDD;
font-size: 1.4rem;
background-color: #F9F9F9;
}
.output .label {
font-weight: bold;
padding: 10px 15px;
}
.output span {
padding: 10px 15px;
}
.readability {
cursor: pointer;
}
.keywords {
display: none;
margin: 4% 0 0;
font-size: 2rem;
font-weight: 900;
}
.keywords ul {
border: 1px solid #DDD;
font-size: 1.4rem;
background-color: #F9F9F9;
margin: 2% 0;
}
.keywords li {
display: inline-block;
width: 44%;
padding: 10px;
margin: 1%;
}
JavaScript:
document.addEventListener("DOMContentLoaded", function () {
const input = document.getElementById("text-input");
const characterCount = document.getElementById("characterCount");
const wordCount = document.getElementById("wordCount");
const sentenceCount = document.getElementById("sentenceCount");
const paragraphCount = document.getElementById("paragraphCount");
const readingTime = document.getElementById("readingTime");
const readability = document.getElementById("readability");
const keywordsDiv = document.querySelector(".keywords");
const topKeywords = document.getElementById("topKeywords");
function updateWordCount(text) {
// Character count
characterCount.textContent = text.length;
// Word count
const words = text.match(/\b\w+\b/g);
wordCount.textContent = words ? words.length : 0;
// Sentence count
const sentences = text.split(/[.!?]+/);
sentenceCount.textContent = sentences.length - 1;
// Paragraph count
const paragraphs = text.split('\n\n');
paragraphCount.textContent = paragraphs.length;
// Reading time (assuming 275 words per minute)
const wordCountValue = words ? words.length : 0;
const readingTimeValue = wordCountValue > 0 ? Math.ceil(wordCountValue / 275) : 0;
readingTime.textContent = readingTimeValue + " min";
}
// Update counts on text input
input.addEventListener("input", function () {
updateWordCount(input.value);
// Display top keywords
displayTopKeywords(input.value);
});
function displayTopKeywords(text) {
const stopWords = [
"a", "about", "above", "after", "again", "against", "ain", "all", "am", "an", "and", "any",
"are", "aren", "aren't", "as", "at", "be", "because", "been", "before", "being", "below",
"between", "both", "but", "by", "can", "couldn", "couldn't", "d", "did", "didn", "didn't",
"do", "does", "doesn", "doesn't", "doing", "don", "don't", "down", "during", "each",
"few", "for", "from", "further", "had", "hadn", "hadn't", "has", "hasn", "hasn't", "have",
"haven", "haven't", "having", "he", "her", "here", "hers", "herself", "him", "himself",
"his", "how", "i", "if", "in", "into", "is", "isn", "isn't", "it", "it's", "its", "itself",
"just", "ll", "m", "ma", "me", "mightn", "mightn't", "more", "most", "mustn", "mustn't",
"my", "myself", "needn", "needn't", "no", "nor", "not", "now", "o", "of", "off", "on",
"once", "only", "or", "other", "our", "ours", "ourselves", "out", "over", "own", "re",
"s", "same", "shan", "shan't", "she", "she's", "should", "should've", "shouldn", "shouldn't",
"so", "some", "such", "t", "than", "that", "that'll", "the", "their", "theirs", "them",
"themselves", "then", "there", "these", "they", "this", "those", "through", "to", "too",
"under", "until", "up", "ve", "very", "was", "wasn", "wasn't", "we", "were", "weren't",
"what", "when", "where", "which", "while", "who", "whom", "why", "will", "with", "won",
"won't", "wouldn", "wouldn't", "y", "you", "you'd", "you'll", "you're", "you've", "your",
"yours", "yourself", "yourselves"
];
const words = text.match(/\b\w+\b/g);
if (!words) {
keywordsDiv.style.display = "none";
return;
}
const wordCount = {};
for (const word of words) {
const lowerWord = word.toLowerCase();
if (!stopWords.includes(lowerWord)) {
if (wordCount[lowerWord]) {
wordCount[lowerWord]++;
} else {
wordCount[lowerWord] = 1;
}
}
}
const sortedKeywords = Object.entries(wordCount).sort((a, b) => b[1] - a[1]).slice(0, 4);
topKeywords.innerHTML = "";
for (const [keyword, count] of sortedKeywords) {
const li = document.createElement('li');
li.innerHTML = `<b>${keyword}</b>: ${count}`;
topKeywords.appendChild(li);
}
keywordsDiv.style.display = "block";
}
readability.addEventListener("click", function () {
// Your readability calculation logic here
// Update the "readability" element with the result
});
});
