Password strength checker using javascript

 <style>

#area{

    background-color: aliceblue;

    width: 50%;

}

#progress{

background-color: red;

width: 1%;

transition: 0.6s;

color:white;

}

</style>

<input type="text" id = "password" placeholder="Type your password"><br><br>

<div id = "area">

    <div id="progress">1%</div>

</div>

<div id="message"></div>

<script>

    var p = document.getElementById("password");  //seleting the id

    let progress = document.getElementById("progress");

    p.oninput = function(){        

        var myinput = p.value;

        let incre = 0;

        let per = ["1%","20%","40%","80%","100%"];

        let colr = ["red","yellow","blue","steelblue","green"];

        if(myinput.length>=8){

            let regx = [/[0-9]/,/[a-z]/,/[A-Z]/,/[^0-9a-zA-Z]/];   //a regular expression pattern

            regx.forEach((items)=>{

                if(items.test(myinput))

                {

                    incre += 1;

                }

            });

        }

        progress.style.backgroundColor = colr[incre];   // colr[1]  // accessing array address

        progress.style.width = per[incre];

        progress.innerHTML = per[incre];    

       

         

       

    }

</script>