Password

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
	h4{
	color:red;
	}
</style>
<script>
	$(document).ready(function(){

			$('#txtp').click(function(){
				var a=$('#txticon').attr('class');
				if(a=="fa fa-eye")
				{
					$('#txticon').attr('class',"fa fa-eye-slash");
					$('#txt1').attr('type','TEXT');

				}
				else
				{
					$('#txticon').attr('class',"fa fa-eye");
					$('#txt1').attr('type','password');
				}

				});
			$('#txt1').keyup(function(){
				var p1="";
				var a=$('#txt1').val();
				if(/[A-Z]+/.test(a)==true)
				{
					$('#p3').css('color','green');
					$('#c3').attr('class','fa fa-check-circle');
				}
				else
				{
					$('#p3').css('color','red');
					$('#c3').attr('class','fa fa-times-circle');
				}
				if(/[a-z]+/.test(a)==true)
				{
					$('#p2').css('color','green');
					$('#c2').attr('class','fa fa-check-circle');
				}
				else
				{
					$('#p2').css('color','red');
					$('#c2').attr('class','fa fa-times-circle');
				}
				if(/[0-9]+/.test(a)==true)
				{
					$('#p4').css('color','green');
					$('#c4').attr('class','fa fa-check-circle');
				}
				else
				{
					$('#p4').css('color','red');
					$('#c4').attr('class','fa fa-times-circle');
				}
				if(a.length>=8)
				{
					$('#p1').css('color','green');
					$('#c1').attr('class','fa fa-check-circle');
				}
				else
				{
					$('#p1').css('color','red');
					$('#c1').attr('class','fa fa-times-circle');
				}
				if(/^[a-zA-Z0-9]*$/.test(a)==false)
				{
					$('#p5').css('color','green');
					$('#c5').attr('class','fa fa-check-circle');
				}
				else
				{
						$('#p5').css('color','red');
					$('#c5').attr('class','fa fa-times-circle');
				}
			});


		});
</script>
<html>
	<head>
		<title>
			JQ4
		</title>


	<head>
	<body class="bg-info text-light">
		<h1 align="center">Password</h1>
		<form >
			<div class="row offset-md-4 col-md-4">
				<div CLASS="input-group">
						<input type="password" id="txt1"class="form-control" placeholder="Enter the password!">
					<div class="input-group-postpend">
						<div id="txtp"class="input-group-text">

						<i class="fa fa-eye" id="txticon" style="height:25px"></i>
						</div>
					</div>
				</div>
			</div>

			<br>
				<center>
			<div class="bg-warning"  style="text-align:center;width:60%">
			<div class="row offset-md-3 col-md-8 ">
				<h4 id="p1"><p ><i id="c1" class="fa fa-times-circle"></i>  minimum  8 characters</p></h4>
			</div>
			<div class="row offset-md-3 col-md-8 ">
				<h4 id="p2"><p ><i id="c2" class="fa fa-times-circle"></i>  minimum  1 Small alphabet</p></h4>
			</div>
			<div class="row offset-md-3 col-md-8 ">
				<h4 id="p3" ><p ><i id="c3" class="fa fa-times-circle"></i>  minimum  1 capital alphabet</p></h4>
			</div>
			<div class="row offset-md-3 col-md-8 ">
				<h4 id="p4"><p ><i id="c4" class="fa fa-times-circle"></i>  minimum  1 digit</p></h4>
			</div>
			<div class="row offset-md-3 col-md-8 ">
				<h4  id="p5"><p ><i id="c5" class="fa fa-times-circle"></i>  minimum  1 special characters</p></h4>
			</div>
			</div>
		</form>
	</body>
<html>