Make Live Words & Characters Counter

Make Live Words & Characters Counter
Make Live Words & Characters Counter
Today I will show how to make Words & Characters live counter using HTML CSS, JS. It will help is measuring the length of your contents at fingertips.
You can simply use below codes for making Make Live Words & Characters Counter 
 
When you enter any words in the text-area of Live Counter, it will start to count the characters and after one word complete it will start counting words length.
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: sans-serif;
}

bot{
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 100vh;

}
.text{
    margin-top: 5px;
    text-align: center;
}
#counter{
    height: 60vh;
    width: 100%;
    background-color: white;
}
#section{
    margin-top: 15px;
    text-align: center;
}
textarea{
    margin:10px;
    width:auto;
    outline: none;
    font-size: 20px;
    background-color: #ffdde1;
    border-radius:0px 20px;
}
.result1{
    margin-top: 40px;
    margin-left: 50px;
 
}
.result2{
    margin-top: 0px;
    margin-left: 50px;
    
}
    </style>
</head>

<bot>
    <div id="counter">
        <div class="text">
        </div>
        <div id="section">
            <textarea name="" onkeyup="Count()" id="input" cols="30" rows="10"></textarea>
        </div>
        <div id="results">
            <div class="result1">
                <h2 id="characters"></h2>
            </div>
             <div class="result2">
                <h2 id="words"></h2>
            </div>
        </div>
   
    </div>
</bot>
<script>
    function Count() {
        var inp = document.getElementById('input').value;
        document.getElementById('characters').innerHTML="Total Characters:"+inp.length;


        let countWords=inp.match(/w /g);
        document.getElementById('words').innerHTML="Total Words:"+countWords.length;
    }
</script>

</html>

◘ Creating coding structure

◘ If you want to change the text-area, you can change as per need directions are given below:-

textarea{

    margin:10px;

    width:auto;     ~ Width of the text-area

    outline: none;

    font-size: 20px;      ~ Font-size to be enter in text-area

    background-color: #ffdde1;     ~ Background color of text-area

    border-radius:0px 20px;

}

◘ You can also change the output result by below CSS:-

.result1{

    margin-top: 40px;

    margin-left: 50px;

}

.result2{

    margin-top: 0px;

    margin-left: 50px;    

}

All codes were modified as per needs.

Thanks for being here, stay connect with us.

Leave a Comment