A35G/Password-strength-meter.html

## Password-strength-meter.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Password Strength Meter</title>
        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Font Awesome Library -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
        <style type="text/css">
            div#checkd > div > span {font-size: 10px;}
            .displayBadge {text-align: center; display: block;}
        </style>
    </head>
    <body>

        <main>
            <div class="container">

                <div class="row border rounded p-3 mt-3">
                    <div class="col-md-3"></div>
                    <div class="col-md-6 text-center">

                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label">Password Strength Meter</label>
                                <input type="text" name="psmfield" id="psmf" class="form-control form-control-sm">
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12">
                                <span id="sbdg" class="badge displayBadge">&nbsp;</span>
                            </div>
                        </div>

                        <div id="checkd" class="row mt-2">
                            <div class="col-md-4">
                                <span id="nchar" class="fw-bold">0 characters</span>
                            </div>
                            <div class="col-md-2">
                                <span id="lower_s" class="text-secondary"><i id="lower_i" class="fas fa-times"></i> Lower letters</span>
                            </div>
                            <div class="col-md-2">
                                <span id="upper_s" class="text-secondary"><i id="upper_i" class="fas fa-times"></i> Upper letters</span>
                            </div>
                            <div class="col-md-2">
                                <span id="number_s" class="text-secondary"><i id="number_i" class="fas fa-times"></i> Numbers</span>
                            </div>
                            <div class="col-md-2">
                                <span id="symbol_s" class="text-secondary"><i id="symbol_i" class="fas fa-times"></i> Symbols</span>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-3"></div>
                </div>

            </div>
        </main>

        <script type="text/javascript">
            let ccounter = document.getElementById("nchar");
            let sbdg = document.getElementById('sbdg');

            let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})');
            let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))');

            function paintBadge(args) {
                if (strongPassword.test(args)) {
                    sbdg.style.backgroundColor = "green";
                    sbdg.textContent = 'Strong';
                } else if (mediumPassword.test(args)) {
                    sbdg.style.backgroundColor = 'blue';
                    sbdg.textContent = 'Medium';
                } else {
                    sbdg.style.backgroundColor = 'red';
                    sbdg.textContent = 'Weak';
                }
            }

            function highlight(type,notMatch = false) {
                let box = document.getElementById(type + "_s");
                let img = document.getElementById(type + "_i");
                if (notMatch) {
                    box.className = "text-danger";
                    img.className = "fa fa-times";
                } else {
                    box.className = "text-success";
                    img.className = "fa fa-check";
                }
            }

            function checkMatch(args) {
                if (args.match(/[a-z]/g)) {
                    highlight("lower");
                } else {
                    highlight("lower",true);
                }

                if (args.match(/[A-Z]/g)) {
                    highlight("upper");
                } else {
                    highlight("upper",true);
                }

                if (args.match(/[0-9]/g)) {
                    highlight("number");
                } else {
                    highlight("number",true);
                }

                if (args.match(/[!"#£$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/)) {
                    highlight("symbol");
                } else {
                    highlight("symbol",true);
                }
            }

            function resetView() {
                sbdg.style.backgroundColor = '';
                sbdg.textContent = '&nbsp;';
                ccounter.textContent = '0 characters';

                let span = ["lower","upper","number","symbol"];
                span.forEach((elm) => {
                    document.getElementById(elm + "_s").className = "text-secondary";
                    document.getElementById(elm + "_i").className = "fa fa-times";
                });
            }

            document.addEventListener('input', function(event) {
                if (event.target.id == "psmf") {
                    let datap = event.target.value;
                    datap = datap.trim();
                    if (datap !== '' && datap !== null && datap.length !== 0) {
                        ccounter.textContent = datap.length + ' characters';
                        paintBadge(datap);
                        checkMatch(datap);
                    } else {
                        resetView();
                    }
                }
            });
        </script>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Password Strength Meter</title>
	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Font Awesome Library -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
	<style type="text/css">
	div#checkd > div > span {font-size: 10px;}
	.displayBadge {text-align: center; display: block;}
	</style>
	</head>
	<body>

	<main>
	<div class="container">

	<div class="row border rounded p-3 mt-3">
	<div class="col-md-3"></div>
	<div class="col-md-6 text-center">

	<div class="row">
	<div class="col-md-12">
	<label class="form-label">Password Strength Meter</label>
	<input type="text" name="psmfield" id="psmf" class="form-control form-control-sm">
	</div>
	</div>

	<div class="row mt-2">
	<div class="col-md-12">
	<span id="sbdg" class="badge displayBadge"> </span>
	</div>
	</div>

	<div id="checkd" class="row mt-2">
	<div class="col-md-4">
	<span id="nchar" class="fw-bold">0 characters</span>
	</div>
	<div class="col-md-2">
	<span id="lower_s" class="text-secondary"><i id="lower_i" class="fas fa-times"></i> Lower letters</span>
	</div>
	<div class="col-md-2">
	<span id="upper_s" class="text-secondary"><i id="upper_i" class="fas fa-times"></i> Upper letters</span>
	</div>
	<div class="col-md-2">
	<span id="number_s" class="text-secondary"><i id="number_i" class="fas fa-times"></i> Numbers</span>
	</div>
	<div class="col-md-2">
	<span id="symbol_s" class="text-secondary"><i id="symbol_i" class="fas fa-times"></i> Symbols</span>
	</div>
	</div>

	</div>
	<div class="col-md-3"></div>
	</div>

	</div>
	</main>

	<script type="text/javascript">
	let ccounter = document.getElementById("nchar");
	let sbdg = document.getElementById('sbdg');

	let strongPassword = new RegExp('(?=.[a-z])(?=.[A-Z])(?=.[0-9])(?=.[^A-Za-z0-9])(?=.{8,})');
	let mediumPassword = new RegExp('((?=.[a-z])(?=.[A-Z])(?=.[0-9])(?=.[^A-Za-z0-9])(?=.{6,}))\|((?=.[a-z])(?=.[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))');

	function paintBadge(args) {
	if (strongPassword.test(args)) {
	sbdg.style.backgroundColor = "green";
	sbdg.textContent = 'Strong';
	} else if (mediumPassword.test(args)) {
	sbdg.style.backgroundColor = 'blue';
	sbdg.textContent = 'Medium';
	} else {
	sbdg.style.backgroundColor = 'red';
	sbdg.textContent = 'Weak';
	}
	}

	function highlight(type,notMatch = false) {
	let box = document.getElementById(type + "_s");
	let img = document.getElementById(type + "_i");
	if (notMatch) {
	box.className = "text-danger";
	img.className = "fa fa-times";
	} else {
	box.className = "text-success";
	img.className = "fa fa-check";
	}
	}

	function checkMatch(args) {
	if (args.match(/[a-z]/g)) {
	highlight("lower");
	} else {
	highlight("lower",true);
	}

	if (args.match(/[A-Z]/g)) {
	highlight("upper");
	} else {
	highlight("upper",true);
	}

	if (args.match(/[0-9]/g)) {
	highlight("number");
	} else {
	highlight("number",true);
	}

	if (args.match(/[!"#£$%&'()*+,\-./:;<=>?@[\\\]^_`{\|}~]/)) {
	highlight("symbol");
	} else {
	highlight("symbol",true);
	}
	}

	function resetView() {
	sbdg.style.backgroundColor = '';
	sbdg.textContent = ' ';
	ccounter.textContent = '0 characters';

	let span = ["lower","upper","number","symbol"];
	span.forEach((elm) => {
	document.getElementById(elm + "_s").className = "text-secondary";
	document.getElementById(elm + "_i").className = "fa fa-times";
	});
	}

	document.addEventListener('input', function(event) {
	if (event.target.id == "psmf") {
	let datap = event.target.value;
	datap = datap.trim();
	if (datap !== '' && datap !== null && datap.length !== 0) {
	ccounter.textContent = datap.length + ' characters';
	paintBadge(datap);
	checkMatch(datap);
	} else {
	resetView();
	}
	}
	});
	</script>

	</body>
	</html>