Update 2

Author: supzi-del

Password Strength Meter/index.html

@@ -12,7 +12,7 @@
     <div class="container">
       <header>Password Strength Meter<br></header>
       <form action="#">
-        <div class="field"><input onkeyup="trigger()" type="password" placeholder="Type your password"><span class="showBtn">SHOW</span></div>
+        <div class="field"><input id="trigger" type="password" placeholder="Type your password"><span class="showBtn">SHOW</span></div>
         <!--field-->
         <div class="indicator">
           <span class="weak"></span>

Password Strength Meter/script.js

@@ -12,59 +12,62 @@ let regExpStrong = /.[!,@,#,$,%,^,&,*,(,)]/;
 
 
 
-function trigger() {
+document.getElementById("trigger").addEventListener("keyup", function() {
 	if (input.value != "") {
 		indicator.style.display = "flex";
 
-		if (input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong))) no = 1;
 
-		if (input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong)))) no = 2;
+	} else {
+		indicator.style.display = "none";
+		text.style.display = "none";
+		showBtn.style.display = "none";
+	}
 
-		if (input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong)) no = 3;
+	if (input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong))) no = 1;
 
-		if (no == 1) {
-			weak.classList.add("active");
-			text.style.display = "block";
-			text.textContent = "Your password is too weak";
-			text.classList.add("weak");
-		}
+	if (input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong)))) no = 2;
 
-		if (no == 2) {
-			medium.classList.add("active");
-			text.textContent = "Your password is average";
-			text.classList.add("medium");
-		} else {
-			medium.classList.remove("active");
-			text.classList.remove("medium");
-		}
+	if (input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong)) no = 3;
 
-		if (no == 3) {
-			medium.classList.add("active");
-			strong.classList.add("active");
-			text.style.display = "block";
-			text.textContent = "Your password is strong";
-			text.classList.add("strong");
-		} else {
-			strong.classList.remove("active");
-			text.classList.remove("strong");
-		}
+	if (no == 1) {
+		weak.classList.add("active");
+		text.style.display = "block";
+		text.textContent = "Your password is too weak";
+		text.classList.add("weak");
+	}
 
-		showBtn.style.display = "block";
-		showBtn.onclick = function() {
-			if (input.type == "password") {
-				input.type = "text";
-				showBtn.textContent = "HIDE";
-				showBtn.style.color = "#23ad5c";
-			} else {
-				input.type = "password";
-				showBtn.textContent = "SHOW";
-				showBtn.style.color = "#000";
-			}
-		}
+	if (no == 2) {
+		medium.classList.add("active");
+		text.textContent = "Your password is average";
+		text.classList.add("medium");
 	} else {
-		indicator.style.display = "none";
-		text.style.display = "none";
-		showBtn.style.display = "none";
+		medium.classList.remove("active");
+		text.classList.remove("medium");
+	}
+
+	if (no == 3) {
+		medium.classList.add("active");
+		strong.classList.add("active");
+		text.style.display = "block";
+		text.textContent = "Your password is strong";
+		text.classList.add("strong");
+	} else {
+		strong.classList.remove("active");
+		text.classList.remove("strong");
 	}
-}
+
+	showBtn.style.display = "block";
+	showBtn.onclick = function() {
+		if (input.type == "password") {
+			input.type = "text";
+			showBtn.textContent = "HIDE";
+			showBtn.style.color = "#23ad5c";
+		} else {
+			input.type = "password";
+			showBtn.textContent = "SHOW";
+			showBtn.style.color = "#000";
+		}
+	}
+
+});