Character and World Count

Character and World Count js plugin .

by pawangupta18

HTML

<div class="container">
        
        <div class="worldCon">
            <h2>World and Charactor Count</h2>
            <div class="inpuArea"> <textarea rows="10" id="textbox"></textarea></div>
            
            <div class="footerArea">
                      
                      <div class="alinitem">Characters <span id="char">0</span></div> 
                      <div class="alinitem">world Count <span id="word">0</span></div> 
            </div>
        </div>
        
    </div>

CSS

*{margin: 0px; padding: 0px; list-style: none;}
    body{margin: 0px; padding: 0px; list-style: none;}
    .container{width: 1170px; margin: 0 auto;}

    .worldCon{width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap;}
    .worldCon h2 {
        background-color: #1aabe3;
        width: 100%;
        height: auto;
        text-align: center;
        padding: 10px;
        color: #fff;
    }
    .inpuArea{width: 100%; height: auto; text-align: center; padding: 20px}
        .inpuArea textarea{width: 100%; height: auto;}
    .footerArea{width: 100%; height: auto; display: flex; 
    flex-wrap: wrap; justify-content: space-between; padding: 15px;
    background-color: #e1f7ff;}
    .footerArea .alinitem{width:calc(50% - 10px); text-align: center;}

JavaScript

let textbox = document.querySelector("#textbox");
            let cCount = document.querySelector("#char");
            let wWord = document.querySelector("#word");

            textbox.addEventListener("input", function(){
                var text = this.value;
                //console.log(text);
                let charlenth = text.length;
                cCount.innerHTML = charlenth;

                text = text.trim();
                let worDSplit = text.split(" "); 
                console.log(worDSplit); 
                let clineList = worDSplit.filter(function(el){
                 return el != "";
                });

//                console.log(clineList);
                wWord.innerHTML = clineList.length;
            });