Skip to content

Commit

Permalink
Password Eye Icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmaamostafa74
asmaamostafa74 committed Oct 29, 2024
1 parent 899b0bb commit fef5052
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 19 deletions.
16 changes: 15 additions & 1 deletion src/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,4 +242,18 @@ document.addEventListener("DOMContentLoaded", function() {
})
.catch(error => console.log('Error loading the Breadcrumb:', error));

});
});

// For Password Eye Icon
function togglePassword(icon) {
const passwordInput = icon.closest('.relative').querySelector('input[type="password"], input[type="text"]');
const eyeIcon = icon.querySelector('i');

if (passwordInput.type === 'password') {
passwordInput.type = 'text';
eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
} else {
passwordInput.type = 'password';
eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
}
}
24 changes: 12 additions & 12 deletions src/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@
<a href="#" class="text-sm text-[#2DA5F3] mb-2 font-medium">Forget Password?</a>
</div>
<div class="relative">
<input type="password" placeholder="" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232]">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
</span>
<input id="password" type="password" placeholder="" class="password-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232]">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
<button class="w-full bg-[#FA8232] flex items-center justify-center gap-2 text-white py-2 rounded-md h-[48px] font-bold text-sm">
Expand Down Expand Up @@ -87,19 +87,19 @@
<div>
<label class="blockblock text-[#191C1F] text-sm font-normal">Password</label>
<div class="relative">
<input type="password" placeholder="8+ characters" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232] mt-2">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
</span>
<input type="password" placeholder="8+ characters" class="password-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232] mt-2">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
<div>
<label class="blockblock text-[#191C1F] text-sm font-normal">Confirm Password</label>
<div class="relative">
<input type="password" placeholder="" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232] mt-2">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
</span>
<input type="password" placeholder="" class="password-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232] mt-2">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
<div class="flex items-start gap-1">
Expand Down
12 changes: 6 additions & 6 deletions src/signUp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@
</div>
<div class="relative">
<input type="password" placeholder="" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232]">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
Expand Down Expand Up @@ -88,17 +88,17 @@
<label class="blockblock text-[#191C1F] text-sm font-normal mb-2">Password</label>
<div class="relative">
<input type="password" placeholder="8+ characters" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232] mt-2">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
<div>
<label class="blockblock text-[#191C1F] text-sm font-normal mb-2">Confirm Password</label>
<div class="relative">
<input type="password" placeholder="" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232] mt-2">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
Expand Down

0 comments on commit fef5052

Please sign in to comment.