Case Study: Online character count tool
The online character count tool project helps to count sentence characters, the number of words, the number of spaces, and more.
Project Overview
An online character count tool is a web-based utility that helps users determine the length of their text. It provides information such as the number of characters, words, spaces, and paragraphs in the input text. This tool is useful for writers, students, and professionals who need to adhere to specific text length requirements. The tool is typically built using HTML for the structure, CSS for styling, and JavaScript or Bootstrap for added functionality and responsiveness. Users simply paste or type their text into the tool, and it instantly displays the various counts, making text analysis quick and easy.
Code Explanation
I will not go into further project details. You can download the complete project source code from the link below and extract it to review the source code. If you want more project insights, check out my YouTube video.
Poject Preview.....
This is the index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>coding30 | character counter</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
<!-- Custom styles -->
<link rel="stylesheet" href="css/admin.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
crossorigin="anonymous"></script>
</head>
<body>
<!--Main Navigation-->
<header>
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a href="#" class="list-group-item list-group-item-action py-2 active" data-mdb-ripple-init aria-current="true">
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span>dashboard</span>
</a>
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init>
<i class="fas fa-chart-area fa-fw me-3"></i><span>Menu One </span>
</a>
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i
class="fas fa-lock fa-fw me-3"></i><span>Menu Two</span></a>
</div>
</div>
</nav>
<!-- Sidebar -->
<!-- Navbar -->
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="https://www.coding30.com/assets/images/coding30.png" height="50" alt="" loading="lazy" />
</a>
<!-- Right links -->
<ul class="navbar-nav ms-auto d-flex flex-row">
<!-- Notification dropdown -->
<li class="nav-item dropdown">
<a class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
role="button" data-mdb-dropdown-init aria-expanded="false">
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li>
<a class="dropdown-item" href="#">Something else</a>
</li>
</ul>
</li>
<!-- Icon -->
<li class="nav-item">
<a class="nav-link me-3 me-lg-0" href="#">
<i class="fas fa-fill-drip"></i>
</a>
</li>
<!-- Icon -->
<li class="nav-item me-3 me-lg-0">
<a class="nav-link" href="#">
<i class="fab fa-github"></i>
</a>
</li>
<!-- Icon dropdown -->
<!-- Avatar -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#"
id="navbarDropdownMenuLink" role="button" data-mdb-dropdown-init aria-expanded="false">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="22"
alt="" loading="lazy" />
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">My profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main style="margin-top: 58px">
<div class="container pt-4">
<!-- Section: Main chart -->
<section>
<div class="row">
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div class="align-self-center">
<i class="fas fa-pencil-alt text-info fa-3x"></i>
</div>
<div class="text-end">
<h3 id="total_char">0</h3>
<p class="mb-0">TOTAL CHAR COUNT</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div class="align-self-center">
<i class="fas fa-pencil-alt text-warning fa-3x"></i>
</div>
<div class="text-end">
<h3 id="total_word">0</h3>
<p class="mb-0">TOTAL WORD</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div class="align-self-center">
<i class="fas fa-pencil-alt text-success fa-3x"></i>
</div>
<div class="text-end">
<h3 id="space_count">0</h3>
<p class="mb-0">SPACE COUNT</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div class="align-self-center">
<i class="fas fa-pencil-alt text-danger fa-3x"></i>
</div>
<div class="text-end">
<h3 id="para_count">0</h3>
<p class="mb-0"> PARAGRAPHS COUNT</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4">
<div class="card">
<div class="card-header py-3">
<h5 class="mb-0 text-center"><strong>Work Space</strong></h5>
</div>
<div class="card-body">
<div class="form-outline" data-mdb-input-init>
<textarea class="form-control" id="my_textArea" rows="20"></textarea>
<label class="form-label" for="my_textArea">Your Text Here</label>
</div>
<br>
<button type="button" class="btn btn-primary btn-rounded btn-lg" onclick="convertToLowerCase()" data-mdb-ripple-init>Lower Case</button>
<button type="button" class="btn btn-primary btn-rounded btn-lg" onclick="convertToUpperCase()" data-mdb-ripple-init>Upper Case</button>
</div>
</div>
</section>
<!--Section: Statistics with subtitles-->
</div>
</main>
<!--Main layout-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.umd.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript" src="js/admin.js"></script>
<script>
const my_textArea = document.getElementById('my_textArea');
document.addEventListener('DOMContentLoaded', () => {
const charCount = document.getElementById('total_char');
const total_word = document.getElementById('total_word');
const spaceCountDisplay = document.getElementById('space_count');
const paragraphCountDisplay = document.getElementById('para_count');
my_textArea.addEventListener('input', () => {
charCount.textContent = my_textArea.value.length;
const text_area = my_textArea.value.trim();
const words = text_area === "" ? 0 : text_area.split(/\s+/).length;
total_word.textContent = words;
const sentence = my_textArea.value;
const spaceCount = countSpaces(sentence);
spaceCountDisplay.textContent = spaceCount;
const paragraphCount = countParagraphs(sentence);
paragraphCountDisplay.textContent = paragraphCount;
});
});
function countSpaces(sentence) {
return (sentence.match(/ /g) || []).length;
}
function convertToLowerCase() {
my_textArea.value = my_textArea.value.toLowerCase();
}
function convertToUpperCase(){
my_textArea.value = my_textArea.value.toUpperCase();
}
function countParagraphs(text) {
const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0);
return paragraphs.length;
}
</script>
</body>
</html>