I made a login website recently and used JavaScript for the first time and everything works perfectly except one tiny detail. "Forgot Password?" Works only for half the text. For another half it doesn't. I don't have any idea why is this happening. Anyways that's my question "Why is half of the text not working as a clickable link? Also how can I fix it without distorting any other parts of the website.
Code also on GitHub
document.addEventListener("DOMContentLoaded", function() {
const loginBtn = document.querySelector(".loginbtn");
const emailInput = document.querySelector(".email");
const passInput = document.querySelector(".pass");
const userAlert = document.querySelector(".userpass");
const passAlert = document.querySelector(".alertpass");
loginBtn.addEventListener("click", function() {
let showUserAlert = false;
let showPassAlert = false;
// check empty fields
if (emailInput.value.trim() === "") {
showUserAlert = true;
} else if (passInput.value.trim() === "") {
showPassAlert = true;
}
// show the proper alerts
if (showUserAlert) {
userAlert.style.opacity = "1";
setTimeout(() => (userAlert.style.opacity = "0"), 3000);
}
if (showPassAlert) {
passAlert.style.opacity = "1";
setTimeout(() => (passAlert.style.opacity = "0"), 3000);
}
});
});body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #1abc9c;
font-family: Arial, sans-serif;
}
.login {
width: 360px;
height: 400px;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
}
.top {
flex: 1;
background-color: #16a085;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.bottom {
flex: 3;
}
.icon {
background-color: #16a085;
font-size: 20px;
height: 45px;
width: 45px;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
position: relative;
left: 30px;
top: 30px;
z-index: 1;
}
.email {
height: 40px;
width: 240px;
position: relative;
left: 65px;
top: -15px;
display: flex;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 2px solid #ccc;
padding-left: 20px;
}
.email:focus {
outline: none;
border-color: #16a085;
}
.pass {
height: 40px;
width: 240px;
position: relative;
left: 65px;
top: -45px;
display: flex;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 2px solid #ccc;
padding-left: 20px;
}
.pass:focus {
outline: none;
border-color: #16a085;
}
.icon2 {
background-color: #16a085;
font-size: 20px;
height: 45px;
width: 45px;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
position: relative;
left: 30px;
top: 0px;
z-index: 1;
}
.Link {
position: relative;
left: 30px;
top: -30px;
font-size: 14px;
color: #16a085;
cursor: pointer;
text-decoration: none;
display: block;
}
.forgot:hover {
text-decoration: underline;
}
.loginbtn {
height: 40px;
width: 260px;
background-color: #16a085;
color: white;
border: none;
border-radius: 5px;
position: relative;
left: 50px;
top: -10px;
cursor: pointer;
font-size: 16px;
margin-left: auto;
margin-right: auto;
}
.loginbtn:hover {
background-color: #138d75;
}
.alertpass {
position: relative;
bottom: 94px;
left: 80px;
height: 40px;
width: 200px;
font-size: 12px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
border: 1px solid black;
opacity: 0;
transition: opacity 0.5s ease;
}
.alertpass:after {
position: absolute;
transform: translateY(-30px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid white;
content: "";
box-sizing: border-box;
}
.alertpass:before {
position: absolute;
transform: translateY(-31px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid black;
content: "";
box-sizing: border-box;
}
.userpass {
position: relative;
bottom: 196px;
left: 80px;
height: 40px;
width: 250px;
font-size: 12px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
border: 1px solid black;
opacity: 0;
transition: opacity 0.5s ease;
}
.userpass:after {
position: absolute;
transform: translateY(-30px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid white;
content: "";
box-sizing: border-box;
}
.userpass:before {
position: absolute;
transform: translateY(-31px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid black;
content: "";
box-sizing: border-box;
}
.Link2 {
color: #1abc9c;
text-decoration: none;
}
.Link2:hover {
text-decoration: underline;
}
.Link:hover {
text-decoration: underline;
}
.final {
position: relative;
bottom: 55px;
left: 78px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<div class="login">
<div class="top">
Login on your account
</div>
<div class="bottom">
<div class="username">
<div class="icon">
<i class="fas fa-user"></i>
</div>
<input type="text" placeholder="Email or Username" class = "email">
</div>
<div class="password">
<div class="icon2">
<i class="fas fa-lock"></i>
</div>
<input type="password" placeholder="Password" class = "pass" id = "password">
</div>
<a href="#" class = "Link">Forgot Password?</a>
<button class = "loginbtn">Login</button>
</div>
<div class="alertpass">
<i class="fas fa-exclamation-triangle" style = "font-size: 16px; color: orangered; padding: 5px;"></i>
Please enter a valid password.
</div>
<div class="userpass">
<i class="fas fa-exclamation-triangle" style = "font-size: 16px; color: orangered; padding: 5px;"></i>
Please enter a valid User ID or Email
</div>
<div class="final">
<span>Not a Member?</span>
<a href="#" class = "Link2">Signup Now</a>
</div>
</div>
New contributor
Kraker is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2 Answers 2
From the inspect tool, one can find that the element with the class name alertpass is overlapping on the Forgot Password? element. Hence you are not able to click on it from after the half or letter P.
The click is happening on the alertpass. One have to re-arrange the elements or choose alternative approach to resolve this.
answered 12 hours ago
Sign up to request clarification or add additional context in comments.
1 Comment
Kraker
Thanks i was able to understand the problem but there's still how to fix it. I tried raising the index of the "Forgot Password " but due to that now the password alert message comes under it. How can i make sure the alertpass is under the link but after clicking its above the link?
Your JS code is a function used to listen for events. It doesn't seem to have any effect on the page layout.
Since you didn't provide all the CSS code, it's possible that the invisible styles for alertpass and userpass, both of which use position: relative, are covering the 'Forgot Password?' link. You may need to adjust their positions.
The fastest way to verify whether these two styles are causing the issue is to temporarily change their position to absolute.
Comments
default
.alertpassis over the link.