Simple Word Counter With HTML, and Javascript (Angular JS)| Frontend Everything
 |
| project preview |
Hello Everyone 👋Welcome to My New Blog. Today I have made A simple word counter with the help of HTML, CSS, and Angular JS
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
As we have used only HTML and Angular JS, I have also used CSS for designing as it was not looking good without design. So lets see the preview>!
Video Preview of the project,
So that was the preview now let us start making the project 😄
First, we will code HTML
HTML 🎈( step - 1)
<!-- This is a fork -->
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<h1>Word Counter</h1>
<textarea ng-model="text" ng-change="wordCounter(); sentenceCounter(); paragraphCounter()" placeholder="Enter your text here..."></textarea>
<div class="output row">
<div>Characters:
<span ng-if="!text" id="characterCount">0</span>
<span id="characterCount" ng-if="text.length > 0">{{text.length}}</span></div>
<div>Words: <span id="wordCount">{{ words }}</span></div>
</div>
<div class="output row">
<div>Sentences: <span id="sentenceCount">{{ sentences }}</span></div>
<div>Paragraphs: <span id="paragraphCount">{{ paragraphs }}</span></div>
</div>
</div>
So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
/* border box */
html {
font-family: 'Montserrat', sans-serif;
color: #333333;
box-sizing: border-box;
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Likely future */
}
*,
*:before,
*:after {
box-sizing: inherit;
}
b {
font-weight: bold;
}
/* main app styles */
body {
width: 700px;
margin: 0 auto;
background-color: #eeeeee;
font-family: 'Source Sans Pro', sans-serif;
}
.container {
margin: 2% auto;
padding: 15px;
background-color: #FFFFFF;
}
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;
}
textarea:hover {
border-color: #C0C0C0;
}
textarea:focus {
border-color: #4D90FE;
}
.output.row {
width: 100%;
font-size: 1.4rem;
margin: 1% 0;
background-color: #eeeeee;
}
.output.row div {
display: inline-block;
width: 42%;
padding: 10px 15px;
margin: 1%;
}
.output.row span {
font-weight: bold;
font-size: 1.5rem;
}
/*
** Making it responsive
*/
@media (max-width: 750px) {
body {
width: 600px;
}
.output.row {
font-size: 1.2rem;
}
.output.row span {
font-size: 1.3rem;
}
.keywords ul {
font-size: 1.2rem;
}
}
@media (max-width: 600px) {
/* rewriting old styles */
body {
width: 95%;
}
.output.row {
border: none;
background-color: #FFF;
}
.output.row div {
display: block;
width: 100%;
padding: 10px 15px;
margin: 2% auto;
font-size: 1.8rem;
background-color: #eeeeee;
}
.output.row span {
font-size: 2rem;
}
}
CSS coding is also done. Now let us move to JAVASCRIPT 😎
javascript 🎈( step - 3)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.text;
$scope.words = 0;
$scope.wordCounter = function() {
var wordCount = $scope.text ? $scope.text.split(/\s+/) : 0;
$scope.words = wordCount ? wordCount.length : 0;
};
$scope.sentences = 0;
$scope.sentenceCounter = function() {
var sentenceCount = $scope.text ? $scope.text.split(/[.?!][ "\n]/) : 0;
$scope.sentences = sentenceCount ? sentenceCount.length - 1 : 0;
};
$scope.paragraphs = 0;
$scope.paragraphCounter = function() {
var paragraphCount = $scope.text ? $scope.text.split(/\n/) : 0;
$scope.paragraphs = paragraphCount ? paragraphCount.length : 0;
};
});
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.