[Bug]: Show and Hide Button is not working

sohinirathor2004 · Jun 28, 2024 · 3a060b9 · 3a060b9
1 parent 56852b0
commit 3a060b9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 26 deletions.
diff --git a/Css-files/login.css b/Css-files/login.css
@@ -91,10 +91,6 @@
   width: 80%;
 }
 
-.back-button{
-  display: none;
-}
-
 @media screen and (width <= 600px) {
   .card{
     width: 95%;
@@ -109,9 +105,6 @@
     padding-bottom: 4rem;
     padding-top: 0;
   }
-  .back-button{
-		display: block;
-	}
 }
 
 #rememberCheckbox{

diff --git a/Css-files/signup.css b/Css-files/signup.css
@@ -88,10 +88,6 @@
 	width: 80%;
 }
 
-.back-button{
-	display: none;
-}
-
 @media screen and (width <=600px) {
 	.card {
 		width: 95%;
@@ -107,9 +103,6 @@
 		padding-bottom: 4rem;
 		padding-top: 0;
 	}
-	.back-button{
-		display: block;
-	}
 }
 
 @media screen and (width >= 2000px)

diff --git a/Html-files/login.html b/Html-files/login.html
@@ -84,7 +84,6 @@
 	</nav>
 
 	<div class="head_container">
-		<button style="background:transparent;border: none; margin-left: 20px; padding-top: 10px;" class="back-button"><a href="../index.html"><i class="fa-solid fa-arrow-left" style="color: #ffffff; font-size: 18px; cursor: pointer;"></a></i></button>
 		<div class="mainhead">
 			<h1 class="m-0">LOGIN</h1>
 		</div>
@@ -112,11 +111,10 @@ <h1 class="title text-center">LOGIN</h1>
 							</div>
 							<div class="textfield">
 								<label for="login-password">Password</label>
-								<input type="password" id="login-password" name="password" placeholder="Enter Password"
-									required>
-								<span id="login-hide">
-									<i class='hide-icon bx bxs-hide'></i>
-								</span>
+								<input type="password" id="login-password" name="password" placeholder="Enter Password" required>
+        						<span id="login-hide">
+            					<i class='hide-icon bx bxs-hide'></i>
+        						</span>
 							</div>
 							<div class="row justify-content-between">
 								<div class="col">
@@ -415,6 +413,24 @@ <h4>Follow Us</h4>
 		// 			alert(error.message);
 		// 		});
 		// });
+		document.addEventListener("DOMContentLoaded", function() {
+    const passwordInput = document.getElementById('login-password');
+    const toggleIcon = document.getElementById('login-hide');
+    const icon = toggleIcon.querySelector('i');
+
+    toggleIcon.addEventListener('click', function() {
+        if (passwordInput.type === "password") {
+            passwordInput.type = "text";
+            icon.classList.remove('bxs-hide');
+            icon.classList.add('bxs-show'); // Change the icon class as needed
+        } else {
+            passwordInput.type = "password";
+            icon.classList.remove('bxs-show');
+            icon.classList.add('bxs-hide'); // Change the icon class as needed
+        }
+    });
+});
+
 	</script>
 </body>
 

diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -84,7 +84,6 @@
 	</nav>
 
 	<div class="head_container">
-		<button style="background:transparent;border: none; margin-left: 20px; padding-top: 10px;" class="back-button"><a href="../index.html"><i class="fa-solid fa-arrow-left" style="color: #ffffff; font-size: 18px; cursor: pointer;"></a></i></button>
 		<div class="mainhead">
 			<h1 class="m-0">SIGN UP</h1>
 		</div>
@@ -117,11 +116,11 @@ <h1 class="title">SIGN UP</h1>
 							</div>
 							<div class="textfield">
 								<label for="signup-password">Password</label>
-								<input type="password" id="signup-password" name="password" placeholder="Enter Password"
-									required>
-								<span id="signup-hide">
-									<i class='hide-icon bx bxs-hide'></i>
-								</span>
+								<input type="password" id="signup-password" name="password" placeholder="Enter Password" required>
+        						<span id="signup-hide">
+            					<i class='hide-icon bx bxs-hide'></i>
+						        </span>
+
 							</div>
 							<button type="submit" class="btn-login">Register</button>
 							<h1 class="text-center">Already have an account
@@ -317,6 +316,27 @@ <h4>Follow Us</h4>
 		// 			alert(error.message);
 		// 		});
 		// });
+		document.addEventListener("DOMContentLoaded", function() {
+    const togglePasswordVisibility = (inputId, toggleId) => {
+        const passwordInput = document.getElementById(inputId);
+        const toggleIcon = document.getElementById(toggleId);
+        const icon = toggleIcon.querySelector('i');
+
+        toggleIcon.addEventListener('click', function() {
+            if (passwordInput.type === "password") {
+                passwordInput.type = "text";
+                icon.classList.remove('bxs-hide');
+                icon.classList.add('bxs-show'); // Change the icon class as needed
+            } else {
+                passwordInput.type = "password";
+                icon.classList.remove('bxs-show');
+                icon.classList.add('bxs-hide'); // Change the icon class as needed
+            }
+        });
+    };
+    togglePasswordVisibility('signup-password', 'signup-hide');
+});
+
 	</script>
 </body>