Last active
July 19, 2021 05:34
-
-
Save aashishpanthi/7fc45e76fe01cbdbc6a2c2d193d92b0f to your computer and use it in GitHub Desktop.
Make complete login and registration form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<link rel="stylesheet" href="style.css"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Login and registration form</title> | |
</head> | |
<body> | |
<div id="main"> | |
<div class="toggle-button"> | |
<div class="togglr"></div> | |
<div class="login-button" onclick='loginActive()'>Login</div> | |
<div class="register-button" onclick='registerActive()'>Register</div> | |
</div> | |
<div class="main-form-contents"> | |
<form action="" id='loginForm'> | |
<p class="form-item"> | |
<input type="text" id="username" required /> | |
<label for="username"> Username </label> | |
</p> | |
<p class="form-item"> | |
<input type="password" id="password" required /> | |
<label for="password"> Password </label> | |
</p> | |
<a href="#" id="forgot"> Forgot password?</a> | |
<button type="submit" id='login_submit'>Login</button> | |
</form> | |
<form action="" id='registerForm' onreset="return resetForm()"> | |
<p class="form-item"> | |
<input type="text" id="register_username" required /> | |
<label for="register_username"> Username </label> | |
</p> | |
<p class="form-item"> | |
<input type="text" id="register_email" required /> | |
<label for="register_email"> Email </label> | |
</p> | |
<p class="form-item"> | |
<input type="password" id="register_password" required /> | |
<label for="register_password"> Password </label> | |
</p> | |
<p class="form-item"> | |
<input type="password" id="cofirm_password" required /> | |
<label for="cofirm_password"> Confirm Password </label> | |
</p> | |
<button type="submit" id='register_submit'>Register</button> | |
<input type="reset" id='reset_button' value="Reset"> | |
</form> | |
</div> | |
</div> | |
<script src='./script.js'></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const registerForm = document.querySelector('#registerForm') | |
const loginForm = document.querySelector('#loginForm') | |
const togglr = document.querySelector('.togglr') | |
function registerActive(){ | |
registerForm.style.transform = 'translateX(0%)' | |
loginForm.style.transform = 'translateX(-120%)' | |
togglr.style.left='50%' | |
} | |
function loginActive(){ | |
registerForm.style.transform = 'translateX(120%)' | |
loginForm.style.transform = 'translateX(0%)' | |
togglr.style.left='0%' | |
} | |
const resetForm = () =>confirm('Do you want to reset the registration form?') ? true : false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
margin:0; | |
padding:0; | |
box-sizing:border-box; | |
font-family: sans-serif; | |
} | |
body{ | |
min-height:100vh; | |
display:grid; | |
place-items: center; | |
} | |
#main{ | |
height:400px; | |
width:300px; | |
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); | |
padding:1rem; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.toggle-button{ | |
position:relative; | |
width:250px; | |
height:40px; | |
background:#eee; | |
display:flex; | |
align-items: center; | |
padding:0.5rem 1rem; | |
border-radius:10px; | |
cursor:pointer; | |
} | |
.togglr{ | |
background: royalblue; | |
width:50%; | |
position:absolute; | |
left:0; | |
height:100%; | |
border-radius:10px; | |
transition: 300ms ease-in-out; | |
} | |
.login-button,.register-button{ | |
width:50%; | |
font-size:1.3rem; | |
font-weight: bold; | |
z-index:1; | |
text-align:center; | |
} | |
.main-form-contents{ | |
width:100%; | |
height: 100%; | |
padding: 1rem 0; | |
display:flex; | |
position: relative; | |
overflow:hidden; | |
} | |
form{ | |
position: absolute; | |
width:100%; | |
height:100%; | |
transition: 300ms ease-in-out; | |
} | |
#registerForm{ | |
transform: translateX(120%); | |
} | |
.form-item{ | |
position:relative; | |
width:100%; | |
margin:1.3rem 0; | |
display:flex; | |
align-items:center; | |
} | |
.form-item > input{ | |
width:100%; | |
height:40px; | |
border:2px solid royalblue; | |
outline:none; | |
color:royalblue; | |
font-size:1rem; | |
padding:0 5px; | |
} | |
.form-item > label{ | |
position:absolute; | |
font-size:.9rem; | |
color:royalblue; | |
background:#fff; | |
left: 10px; | |
pointer-events: none; | |
padding:0px 5px; | |
transition: 300ms ease-in-out; | |
} | |
.form-item > input:focus + label, | |
.form-item > input:valid + label{ | |
transform: translateY(-100%); | |
} | |
#forgot{ | |
color:royalblue; | |
font-size: 1rem; | |
font-weight:bold; | |
} | |
#login_submit, #register_submit{ | |
background:royalblue; | |
height: 40px; | |
font-weight: bold; | |
color:#fff; | |
border:none; | |
cursor:pointer; | |
font-size:1rem; | |
border-radius:5px; | |
} | |
#login_submit{ | |
width:100%; | |
margin-top:1rem; | |
} | |
#register_submit{ | |
width:65%; | |
} | |
#reset_button{ | |
width:30%; | |
height:40px; | |
border-radius:5px; | |
color:#fff; | |
font-size:1rem; | |
border:none; | |
cursor:pointer; | |
background:rgb(190, 104, 104); | |
outline:none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment