Sliding Login & Sign up Forms

THE CODE & INFORMATION

SLIDING LOGIN & SIGNUP FORMS

How the Code Works

This code functions as a dynamic UI component for toggling between a Login and a Signup interface without requiring a page refresh. The structure relies on a "container" approach where two separate forms are placed side-by-side inside a form-handler div. The form-handler acts as a viewing pane; by using CSS transitions and JavaScript to manipulate the margin-left property, the code effectively slides the container to hide one form while bringing the other into view.

The JavaScript logic is triggered by an event listener attached to a checkbox (sliderCheck). When the user toggles the switch, the script checks the checked state. If true, it shifts the form-handler to the left, revealing the signup form, and updates the title-text dynamically. If false, it resets the margin to zero, returning the view to the login form. The DOMContentLoaded event is used to ensure the height of the container is calculated correctly based on the content of the forms, providing a smooth, responsive layout.

Why the Code Works

The code is effective because it leverages the browser's ability to manipulate the Document Object Model (DOM) in real-time. By utilizing a "toggle" mechanism—the checkbox—the developer avoids the need for complex state management libraries. The use of calc() in the CSS margin calculation allows for precise alignment, ensuring that the forms snap into place correctly regardless of minor padding or sizing adjustments. It is a lightweight, efficient implementation that balances user experience with minimal resource consumption.

How it is Used

To use this code effectively in a project, follow these steps:

Integration: Copy the provided HTML structure into your main page. Ensure the Google Fonts stylesheet is included in your <head> if you wish to maintain the "retro" aesthetic defined in the link tag.
Styling (CSS): While not explicitly provided in the snippet, you must apply CSS to the classes mentioned (e.g., .form-handler, .form, .switch). Specifically, the .form-handler needs a display property like flex and a defined width, and the parent container should have overflow: hidden to ensure the off-screen form remains invisible.
Functionality: The JavaScript handles the interactive logic, but for a production environment, you should extend the submit buttons to include event listeners that collect the input data and send it to your backend (or a validation script) using fetch or XMLHttpRequest.
Customization: You can easily add more fields to the .form divs. Because the initial script calculates the height of the forms on load, the component will adapt to changes in content size, making it a modular piece of a larger web application.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sliding Login & sign up forms</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js">crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="form-wrapper">
      <h2 class="title-text">LOGIN</h2>
        <label class="switch">
          <input type="checkbox" id="sliderCheck">
          <span class="slider round"></span> 
          <span class="text">Login</span>
          <span class="next-text">Sign up</span>
        </label>
            
        <div class="form-handler">
          <div class="form">
            <label for="mail">Email:</label>
            <input type="email" id="mail" placeholder="example@mail.com">
            <label for="pswd">Password:</label>
            <input type="password" id="pswd" placeholder="your password">
            <button type="submit" id="log-btn">SUBMIT</button>
          </div>
          <div class="form">
            <label for="sign-mail">Email:</label>
            <input type="email" id="sign-mail" placeholder="example@mail.com">
            <label for="sign-pswd">Password:</label>
            <input type="password" id="sign-pswd" placeholder="your password">
            <label for="repeat-pswd">Password:</label>
            <input type="password" id="repeat-pswd" placeholder="your password">
            <button type="submit" id="sign-btn">SUBMIT</button>
          </div>
        </div>
      </div>
      <script src="scripts.js"></script>
  </body>
</html>

CSS


                :root {
  --bg-color: #f5f5f5;
  --bg-primary: #d1d1d1;
  --bg-secondary: #e0e0e0;
  --border-light: 3px inset #ffffff;
  --border-dark: 2px solid #878787;
  --btn-border: 3px outset #ffffff; 
  --color-light: #878787;
  --color-dark: #444444;
  --shadow: 3px 4px 15px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  font-size: 16px;
  line-height: 1.5;
}

.form-wrapper {
  width: 400px;
  height: 100%;
  padding: 15px;
  overflow: hidden;
}

.switch {
  position: relative;
  display: inline-block;
  width: 96%;
  height: 44px;
  margin-bottom: 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00cc00;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 36px;
  width: 50%;
  left: 4px;
  bottom: 4px;
  border-radius: 22px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #f00000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #f00000;
}

input:checked + .slider:before {
  -webkit-transform: translateX(184px);
  -ms-transform: translateX(184px);
  transform: translateX(184px);
}

.slider.round {
  border-radius: 44px;
}

.slider.round:before {
  border-radius: 22px;
}

.text {
  position: absolute;
  top: 13px;
  left: 15%;
  color: #444444;
  z-index: 10;
}

.next-text {
  position: absolute;
  top: 13px;
  left: 60%;
  color: #444444;
  z-index: 10;
}

.form-handler {
  width: 200%;
  height: 100%;
  transition: 0.5s;
  overflow: hidden;
}

.form {
  position: relative;
  display: inline-block;
  width: 48px
  height: 450px;
  padding: 30px 10px;
  background: var(--bg-secondary);
  border: var(--border-light); 
  overflow: hidden;
}

.form:nth-of-type(2) {
  top: -450px;
  margin-left: calc(50% + 15px);
}
      
input {
  width: 100%;
  padding: 10px 6px;
  margin: 8px 0 20px 0;
  border: var(--border-dark);
}

input:first-of-type,
input:nth-of-type(2) {
  margin: 15px 0 40px 0;
}

button {
  width: 50%;
  padding: 10px;
  margin: 30px 0 30px 50%;
  background-image: linear-gradient(-135deg, #0078ff, #0000ff);
  border: var(--btn-border);
  color: #ffffff;
}

JAVASCRIPT

const sliderCheck = document.getElementById('sliderCheck');
const formHandler = document.querySelector('.form-handler');
const titleText = document.querySelector('.title-text');
const forms = document.querySelectorAll('.form');

document.addEventListener('DOMContentLoaded', () => {
  forms[0].style.height = forms[1].offsetHeight + 'px';
});

sliderCheck.addEventListener('change', () => {
  if (sliderCheck.checked === true) {
    formHandler.style.marginLeft = 'calc(-100% - 15px)';
    titleText.textContent = 'SIGN UP';
  }else{
    formHandler.style.marginLeft = 0;
    titleText.textContent = 'LOGIN';
  }
});

MENU

THE CODE & INFORMATION