Skip to content

Commit

Permalink
Added eye icon for password field to toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@swathivemula7
swathivemula7 committed Oct 13, 2024
1 parent c0981b5 commit 2382f7d
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 38 deletions.
53 changes: 25 additions & 28 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
.header-container {
width: 100vw;
background-color: #f8f9fa;
padding: 120px 0;
padding: 70px 0;
text-align: center;
margin-bottom: 10px;
margin-bottom: 20px;
background-image: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
}
Expand Down Expand Up @@ -102,23 +102,6 @@
z-index: 99999999;
transition: transform 0.1s ease-out;
}

.back-to-home {
position: fixed;
top: 20px;
left: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
z-index: 1000;
}
.back-to-home:hover {
background-color: #0056b3;
color: white;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -168,10 +151,6 @@
</div>
<div class="header-container">

<div class="title" >
<h1 class="site-name" style="color: #000;">Canvas</h1>
<i class="fa-solid fa-paintbrush" style="color: #000;"></i>
</div>
<div class="header">
<p class="lead" style="color: #000;">Design and create stunning visuals effortlessly!</p>
</div>
Expand All @@ -181,7 +160,7 @@ <h1 class="site-name" style="color: #000;">Canvas</h1>
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Review</a>
Expand All @@ -191,6 +170,10 @@ <h1 class="site-name" style="color: #000;">Canvas</h1>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Sign Up</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>

</li>
</ul>
</div>
<div id="login" class="form-container mt-5">
Expand All @@ -201,8 +184,8 @@ <h3 class="pb-4">LOG IN</h3>
<i class="fa-solid fa-user"></i>
</div>
<div id="input">
<input type="password" name="password" placeholder="Enter Password" required>
<i class="fa-solid fa-lock"></i>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
<i class="fa-solid fa-eye" id="togglePassword"></i>
</div>
<button type="submit">Log In</button>
</form>
Expand All @@ -218,8 +201,6 @@ <h3 class="pb-4">LOG IN</h3>
<p>Don't have an account? <a href="signup.html">Sign up</a></p> <!-- This should link to signup.html -->

</div>
<a href="index.html" class="back-to-home">◀ Back to Home</a>

<script src="src\Scripts\preloader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
Expand All @@ -242,6 +223,22 @@ <h3 class="pb-4">LOG IN</h3>
circle.style.backgroundColor = colors[index % colors.length];
});


// Select the password field and the eye icon
const passwordInput = document.getElementById('password');
const togglePassword = document.getElementById('togglePassword');

// Add an event listener to the eye icon
togglePassword.addEventListener('click', function () {
// Toggle the type attribute between password and text
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the icon between eye and eye-slash
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});

// Update the coordinates when the mouse moves
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
Expand Down
44 changes: 34 additions & 10 deletions signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
</style>
</head>
<body>
<a href="index.html" class="back-to-home">◀ Back to Home</a>
<a href="index.html" class="back-to-home">Back to Home</a>

</body>
</html>
Expand Down Expand Up @@ -210,11 +210,7 @@
<a class="dribbble" href="https://dribbble.com/shots/5878367-Loaders" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
</div>
<div class="header-container">

<div class="title " >
<h1 class="site-name" style="color: #000;">Canvas</h1>
<i class="fa-solid fa-paintbrush" style="color: #000;"></i>
</div>

<div class="header">
<p class="lead" style="color: #000;">Design and create stunning visuals effortlessly!</p>
</div>
Expand All @@ -224,7 +220,7 @@ <h1 class="site-name" style="color: #000;">Canvas</h1>
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Review</a>
Expand All @@ -233,7 +229,9 @@ <h1 class="site-name" style="color: #000;">Canvas</h1>
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login </a>
<a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>

</li>
</ul>
Expand Down Expand Up @@ -261,7 +259,7 @@ <h3 class="pb-4">CREATE YOUR ACCOUNT</h3>
<!-- Password Input Block with Strength Meter -->
<div id="input">
<input type="password" id="password" name="password" placeholder="Enter Password" required oninput="checkPasswordStrength()" onfocus="showStrengthBar()">
<i class="fa-solid fa-lock"></i>
<i class="fa-solid fa-eye" id="togglePassword"></i>
</div>
<div class="password-strength" id="password-strength" style="display: none;">
<span id="strength-text"></span>
Expand All @@ -274,7 +272,7 @@ <h3 class="pb-4">CREATE YOUR ACCOUNT</h3>
<!-- Confirm Password Input Block -->
<div id="input">
<input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password" required>
<i class="fa-solid fa-lock"></i>
<i class="fa-solid fa-eye" id="toggleConfirmPassword"></i>
</div>

<!-- Importing zxcvbn -->
Expand Down Expand Up @@ -388,6 +386,32 @@ <h3 class="pb-4">CREATE YOUR ACCOUNT</h3>
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

// Toggle Password Visibility
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');

togglePassword.addEventListener('click', function () {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the icon between eye and eye-slash
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});

// Toggle Confirm Password Visibility
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
const confirmPasswordInput = document.getElementById('confirm_password');

toggleConfirmPassword.addEventListener('click', function () {
const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
confirmPasswordInput.setAttribute('type', type);

// Toggle the icon between eye and eye-slash
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});

// Update the coordinates when the mouse moves
window.addEventListener("mousemove", function (e) {
Expand Down

0 comments on commit 2382f7d

Please sign in to comment.