Html Question posted in
Some basic documentation can be found here.

Html – Login Page doesn't transition properly

I made a standard login page that’s supposed to slide across when you try to Sign up, except when I click on sign up nothing happens, my JS is linked properly and my CSS seems to be fine too and no errors are showing up in the console log on chrome.Login Page(https://i.sstatic.net/3qVc8XlD.png)

Here’s the relevant code:

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});
.container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}
 

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" id="main">
        <div class="sign-up">
            <form action="#">
                <h1>Create Account</h1>
                <p>or use your email for registration</p>
                <input type="text" name="txt" placeholder="Name" 
required="">
                <input type="email" name="email" 
placeholder="Email" required="">
                <input type="password" name="pswd" 
placeholder="Password" required="">
                <input type="number" name="phone" 
placeholder="Phone Number" required="">
                <button type="button">Sign Up</button>
            </form>
        </div>
        <div class="sign-in">
            <form action="#">
                <h1>Sign In</h1>
                <p>or use your account</p>
                <input type="text" name="txt" placeholder="Name" 
 required="">
                <input type="password" name="pswd" 
 placeholder="Password" required="">
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To stay connected with us, please login 
 with your personal info</p>
                    <button id="signIn">Sign In</button>
                </div>
                <div class="overlay-right">
                    <h1>Hello Friend!</h1>
                    <p>Enter your personal details and start 
  your journey with us</p>
                    <button id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

I checked for errors in the console and there was nothing

Tags:

2

Answers


  1. 0 
    document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});
    .container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div id="main">
    <div class="overlay-container">
      <div class="overlay">
          <div class="overlay-left">
              <h1>Welcome Back!</h1>
              <p>To stay connected with us, please login with your personal info</p>
              <button id="signIn">Sign In</button>
          </div>
          <div class="overlay-right">
              <h1>Hello Friend!</h1>
              <p>Enter your personal details and start your journey with us</p>
              <button id="signUp">Sign Up</button>
          </div>
      </div>
    </div>
  </div>  
</div>
    Login or Signup to reply.
  2. 0

    Quite confused about whole question but I think you want is when you click on signup button its credentials should slide to right.

    Add solution for that. Please view in full page also modify code as per your needs I have added basic logic and css. Thanks.

    document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');
    const signUpDiv = document.querySelector(".sign-up")

    signUpButton.addEventListener('click', () => {
       signUpDiv.style.display = "block";
      setTimeout(() => {
      signUpDiv.style.transform = "translate3d(0,0,0)";
      },500)
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});
    .container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}

/* ************NEWLY ADDED************ */

.sign-in{
  display: none;
}

.sign-up{
  display: none;
  transform: translate3d(-50%, 0px,0);
  transition: 1s
}
    <body>
    <div class="container" id="main">
        <div class="sign-up">
            <form action="#">
                <h1>Create Account</h1>
                <p>or use your email for registration</p>
                <input type="text" name="txt" placeholder="Name" 
required="">
                <input type="email" name="email" 
placeholder="Email" required="">
                <input type="password" name="pswd" 
placeholder="Password" required="">
                <input type="number" name="phone" 
placeholder="Phone Number" required="">
                <button type="button">Sign Up</button>
            </form>
        </div>
        <div class="sign-in">
            <form action="#">
                <h1>Sign In</h1>
                <p>or use your account</p>
                <input type="text" name="txt" placeholder="Name" 
 required="">
                <input type="password" name="pswd" 
 placeholder="Password" required="">
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To stay connected with us, please login 
 with your personal info</p>
                    <button id="signIn">Sign In</button>
                </div>
                <div class="overlay-right">
                    <h1>Hello Friend!</h1>
                    <p>Enter your personal details and start 
  your journey with us</p>
                    <button id="signUp">Sign Up</button>
                </div>
            </div>
<!--         </div> -->
    </div>
    <script src="script.js"></script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search