RF Word Counter
Simple word counter web app for beginners. I am going to share with you how I developed this project step by step.
When the user types or pastes any text, the app counts how many words and characters are in the textarea (excluding spaces and line breaks).
Tech: html, css and javascript
live link: rf-word-counter.netlify.app
github repo: https://github.com/rahatfaruk/rf-word-counter
html
In html, I have created a container textarea-and-result that contains textarea (for user’s text) and results (how many words and characters – initially 0).
<!– results –>
<div class=“result-container”>
<p><span id=“words”>0</span> Words</p>
<p><span id=“chars”>0</span> Characters</p>
</div>
<!– textarea –>
<textarea name=“textarea”></textarea>
</div>
Rest codes inside html is for styling and page structure purpose.
css
I have tried to keep the design as simple as possible. I have tried to explain styles through comment. Paste the following code inside style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body { padding: 1rem; }
h1 {
margin: 1rem 0 1.5rem;
text-align: center;
}
textarea {
display: block;
height: 100px;
width: 100%;
padding: 1rem;
border: none;
border-radius: .5rem;
background: #dfdfdf;
font-size: 1rem;
resize: vertical;
}
/* ## app styles */
.app {
max-width: 600px;
margin: 0 auto;
}
.textarea-and-result {
padding: 2rem 1rem;
border: 2px solid #ccc;
box-shadow: 3px 3px 8px #ccc;
border-radius: .25rem;
}
.result-container {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
justify-content: center;
}
.result-container p {
padding: 1rem;
border-radius: .5rem;
background: #dfdfdf;
text-align: center;
}
.result-container p span {
display: block;
font-weight: bold;
font-size: 2.5rem;
margin-bottom: .5rem;
}
.attribution {
margin-top: 1.5rem;
color: #999;
font-size: .9rem;
text-align: center;
}
javascript
Steps:
Get all important elements
we want to count words immediately after typing or pasting text into textarea. So, we add input event to the textarea.
get text inside textarea. use text.trim() method to remove extra spaces from the start and end of the text.
get array of all words (without spaces and line-breaks) using regex and put inside words variable. Use text.match(regex) method to get array of matched results. The regex is /S+/gm
The regex flags at the end: ‘g’ means global match; ‘m’ means multi-lines.
S matches any non-whitespace character
+ matches the previous token between one and unlimited times
update results. If textarea doesn’t contain any chars, the words is null; otherwise it’s an array. So, for null value, we show 0. Otherwise, we count and show the results.
use words.length to count words
join all words inside words array using words.join(”); get the legth of resulting string to count characters.
const textarea = document.querySelector(‘textarea‘)
const wordsEl = document.getElementById(‘words‘)
const charsEl = document.getElementById(‘chars‘)
// 2.
textarea.addEventListener(‘input‘, e => {
// 3.
const text = e.target.value.trim()
// 4.
const words = text.match( /S+/gm )
// 5.
wordsEl.textContent = words ? words.length : 0
charsEl.textContent = words ? words.join(”).length : 0
})
