World and Character Count js

live url:-

https://jsfiddle.net/pawangupta18/9hLzv0x1/2/

 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;}

      

Js:-

<script type="text/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;

            });

</script>