Mini project (Word Counter) using HTML, CSS and Javascript ,Bootstrap

Word Counter

Counting the number of lines, words, characters with space and characters without space in a particular area is pretty simple in javascript.

Keyword: Mini project with source code,HTML,Java Script

Table of content

1. Bootstrap

2. Required links

3. Create Layout with html

4. Design with Bootstrap

5. JavaScript functions

6.Get the Full Code

The concept is by using regular expressions we are going to count the no. of words and , characters without space.The split() is used with regular expression to count the no. of lines in a textarea. We are using the bootstrap for the designing our word counter.

Bootstrap:- Bootstrap is world’s most popular HTMl,CSS and Javascript framework for building responsive, mobile-first sites.It is completely free to download and use.

BootstrapCDN:-Bootstrap provided for free by the folks at StackPath.

Starter Template of Bootstrap:

<!doctype html>

<head>

shrink-to-fit=no">

<title>Hello, world!</title>

</head>

<body>

<h1>Hello, world!</h1>

dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+

2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+

6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>

</html>

Step1:Add these links in the <head> section.

First link is of Bootstrap and the second one is for the icons.

Step2: Add jquery link before closing the </body> tag.

Step3:-Creating the simple Layout with HTML.

Basic html tags that are used in this layout is:

1.<h2>:-for heading.

2.<button>:- here we need six buttons for performing the required action:

1.word counting

2.Character counting

3.Character counting without space

4.No. of lines

5.For copy the text

6.For clear the text.

3.<textarea>:-get the input from user.

Step4:-Design the elements with bootstrap class.

All the content should be in a div,mt-5 is the margin from top ,border-warning is for border and its color,rounded-2 is the border style to change the shape into round from the corners.

..........................................

</div>

Heading:-p-3 for padding.

<h2 class="p-3 text-center">Word Counter</h2> </div>

Textarea:-count() is the function that we will creating in the javascript part.

Button:-btn-warning for yellow color ,you can set it according to your choice,It can be primary for blue, danger for red, success for green ,secondary for grey , info for light blue, dark for black etc. btn-lg is the size of the buttons.We use the <span > tag in order to set the id for counting.

<button type="button" class="btn btn-warning btn-lg">Character: <span id="chr">0</span></button>

<button type="button" class="btn btn-warning btn-lg">Character <span class="font-weight-light">(no space)</span>: <span id="chrnospace">0</span></button>

Copy and Clear buttons: myFunction() is the function that we are going to build in javascript.And clear button perform the inline javascript function “text” is the id of text area.

<button type="button" class="btn btn-warning btn-lg" onclick="myFunction()" onmouseout="outFunc()">Copy to clipboard <i class="fa fa-copy"></i>

//fa fa-copy is for copy icon.

</button>

<button type="button" class="btn btn-warning btn-lg" onclick="javascript:eraseText();">Clear <i class='fas fa-trash-alt'></i>

//fa fa-trash-alt is for clear icon.

</button>

Step5:- Now the javascript part:

All the code is written in <script></script> tag before closing the </body> tag.

Creating the variables for each button.

let word_display =document.getElementById("word");

let line_display =document.getElementById("line");

let chr_display = document.getElementById("chr");

let chrnospace_display = document.getElementById("chrnospace");

The count() in order to perform all the actions:

function count(val){

let wordcount =val.match(/\S+/g);

let words = wordcount ? wordcount.length:0;

//character with space

let character = val.length;

//character with nospace

let characternospace = val.replace (/\s+/g,"").length;

let line = val.split(/\r*\n/).length;//line count

//display the output in the html section

word_display.innerHTML=words;

line_display.innerHTML=line;

chr_display.innerHTML=character; chrnospace_display.innerHTML=characternospace;

}

The function for copy the text:

function myFunction() {

//get the text from textarea using “text” id

var copyText = document.getElementById("text");

//select() java script function to select all the text

copyText.select();

copyText.setSelectionRange(0, 99999);

//execute the copy command

document.execCommand("Copy");

//show the tooltip while hovering on the copy button

var tooltip = document.getElementById("myTooltip");

tooltip.innerHTML = "Copied ";

}

The function that show the text while hovering out the mouse after clicking the copy button.

function outFunc() {

var tooltip = document.getElementById("myTooltip");

tooltip.innerHTML = "Copy to clipboard <i class='fa fa-copy'></i> "; //icon for copy

}

Thefunction eraseText () clear the values of textarea as well as all the buttons.

function eraseText() {

document.getElementById("text").value = "";

word_display.innerHTML="0";

line_display.innerHTML="0";

chr_display.innerHTML="0";

chrnospace_display.innerHTML="0";

}

Get the Full code:

<!doctype html>

<head>

</head>

<body>

<h2 class="p-3 text-center">Word Counter</h2> </div>

<button type="button" class="btn btn-warning btn-lg">Character: <span id="chr">0</span></button>

<button type="button" class="btn btn-warning btn-lg">Character <span class="font-weight-light">(no space)</span>: <span id="chrnospace">0</span><br>

</button>

<button type="button" id="myTooltip" class="btn btn-warning btn-lg" onclick="myFunction()" onmouseout="outFunc()">Copy to clipboard <i class="fa fa-copy"></i></button>

<button type="button" class="btn btn-warning btn-lg" onclick="javascript:eraseText();">Clear <i class='fas fa-trash-alt'></i></button>

</div><br>

</div>

let word_display =document.getElementById("word");

let line_display =document.getElementById("line");

let chr_display = document.getElementById("chr");

let chrnospace_display = document.getElementById("chrnospace");

function count(val){

let wordcount =val.match(/\S+/g);

let words = wordcount ? wordcount.length: 0;

let character = val.length; //character with space

let characternospace = val.replace(/\s+/g,"").length; //character with nospace

let line = val.split(/\r*\n/).length;//line count

let value = " ";

word_display.innerHTML=words;

line_display.innerHTML=line;

chr_display.innerHTML=character;

chrnospace_display.innerHTML=characternospace;

}

function myFunction() {

var copyText = document.getElementById("text");

copyText.select();

copyText.setSelectionRange(0, 99999);

document.execCommand("Copy");

var tooltip = document.getElementById("myTooltip");

tooltip.innerHTML = "Copied ";

}

function outFunc() {

var tooltip = document.getElementById("myTooltip");

tooltip.innerHTML = "Copy to clipboard <i class='fa fa-copy'></i> ";

}

function eraseText() {

document.getElementById("text").value = "";

word_display.innerHTML="0";

line_display.innerHTML="0";

chr_display.innerHTML="0";

chrnospace_display.innerHTML="0";

}

</script>

</body>

</html>

Output of this code:

adsterra

Mini project (Word Counter) using HTML, CSS and Javascript ,Bootstrap | with source code|

Post a Comment

0 Comments

AdBanner

Floating

Categories

Featured Post

Chal Mera Putt 2 Full Punjabi Movie (2020) Download |Amrinder gill |Simi Chahal

banners

adsterra

Mini project (Word Counter) using HTML, CSS and Javascript ,Bootstrap | with source code|

You may like these posts

Post a Comment

0 Comments

AdBanner

Floating

Categories

Featured Post

Chal Mera Putt 2 Full Punjabi Movie (2020) Download |Amrinder gill |Simi Chahal

banners