How to create a Login Form using HTML CSS & JS
Hello friends! Welcome back to our Blog ProgrammingHill My name is Aniruddh, Today we are going to create a Login Signup Form using HTML CSS & JavaScript. Friends! nowadays every website uses Login Signup form to make their website more interactive. Login Signup form has become an important part for Web Developers. So Today we will create an responsive Login Signup. It is totally responsive, if you will visit in your desktop or in your phone, everywhere it will look good.
Friends! previously we have created an Web Calculator using HTML CSS and JavaScript, you can also check out that. So friends without wasting any time let's start
Step 1- Create a folder with name Login Signup Form
Friends! firstly create a folder to place your all project files at the same place. Creating a folder help us to easily link files with one another and manage all files at once.
Step 2- Create an index.html file
Now, create an index.html file in the same folder which you have created recently for this Project. this index.html file is the base file of our project, because it contains all the content of the Project. and it also links the CSS and JavaScript file. So friends! open this file in your text editor and paste all the code given below and Save it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Signup Portal</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login | Signup</h1>
<button class="btnUp fg" onclick="lChange()" id="logBtn"><b>Login</b></button>
<button class="btnUp" onclick="sChange()" id="signBtn"><b>Signup</b></button><br>
<input type="email" class="inp" id="email" placeholder="Email Address"><br>
<input type="password" class="inp" id="password" placeholder="Password"><br>
<p class="forget"><a href="#" onclick="forgot()" class="forgot">Forgot password?</a></p>
<span><button class="btn" id="btn" onclick="login()"><b>Login</b></button></span><br>
<p class="member">Not a member? <a href="#" onclick="sChange()" class="forgot">Signup now</a></p>
</div>
</body>
<script src="script.js"></script>
</html>
Step 3- Create a style.css file
Now create a style.css file in the same folder in which you have created your index.html file. this file will contain all the code of designing. To make our Login Signup form responsive, we have written some media query codes in it. Now open this file in your text editor and paste all the code given below and Save.
html {
--bgColor: linear-gradient(90deg, rgb(201, 20, 201), rgb(245, 9, 146));
--fgColor: linear-gradient(90deg, rgb(245, 9, 146), rgb(201, 20, 201));
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bgColor);
}
.container {
margin: auto;
margin-top: 10vh;
box-shadow: 0.1px 0.1px 5px 1px rgba(0, 0, 0, 0.315),
-0.1px -0.1px 5px 1px rgba(0, 0, 0, 0.315);
border-radius: 3px;
background-color: white;
width: 27vw;
height: 70vh;
text-align: center;
}
h1 {
text-align: center;
padding-top: 3vh;
}
.btnUp {
margin: auto;
width: 11vw;
height: 5.5vh;
cursor: pointer;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.219);
border-radius: 2px;
background-color: white;
}
.fg {
color: white;
background: var(--bgColor);
}
.fg:hover {
background: var(--fgColor);
}
.inp {
outline: none;
height: 5vh;
width: 21.3vw;
margin-top: 3vh;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.219);
border-radius: 2px;
background-color: white;
padding-left: 1vw;
}
.forgot {
color: rgb(250, 4, 217);
}
.btn {
color: white;
cursor: pointer;
outline: none;
height: 6vh;
width: 22.8vw;
margin-top: 2vh;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.219);
border-radius: 2px;
background: var(--bgColor);
}
.btn:hover {
background: var(--fgColor);
}
.member {
margin-top: 4vh;
}
@media only screen and (max-width:1024px) {
.container {
width: 90vw;
height: 80vh;
}
.btnUp {
width: 40vw;
}
.inp {
width: 80vw;
}
.btn {
width: 80vw;
}
}
Step 4- Create a script.js file
Friends! this is the last and final step. Now create an script.js file in the same folder where you have created your rest 2 files. this file will contain all the function code of this Project. If you will not create this file then your Login Signup Form will only display but it will not work. so, open this file in your text editor and paste all the code given below and Save this file.
var logBtn = document.querySelector('#logBtn');
var signBtn = document.querySelector('#signBtn');
var btn = document.querySelector('span');
var email=document.querySelector('#email');
var pass=document.querySelector('#password');
function sChange() {
if (signBtn.className !='btnUp fg') {
signBtn.className='btnUp fg';
logBtn.className='btnUp';
btn.innerHTML = `<button class="btn" id="btn" onclick="signUp()"><b>Signup</b></button>`;
}
}
function lChange(){
if(signBtn.className !='btnUp'){
signBtn.className='btnUp';
logBtn.className='btnUp fg';
btn.innerHTML = `<button class="btn" id="btn" onclick="login()"><b>Login</b></button>`;
}
}
function signUp() {
localStorage.setItem('email',email.value);
localStorage.setItem('password',pass.value);
if(email.value=='' | pass.value==''){
alert('Signup Failed')
}
else{
alert('Signup Successful')
lChange();
}
email.value='';
pass.value='';
}
function login() {
if(email.value=='' | pass.value==''){
alert('Login Failed')
}
else if(email.value==localStorage.getItem('email') && pass.value==localStorage.getItem('password')){
alert('Login Successful')
location.assign('https://aniruddhdeveloper.blogspot.com/');
}
else{
alert('Login Failed')
}
email.value='';
pass.value='';
}
function forgot(){
alert('Signup Again')
sChange();
}
Friends! Now we have successfully created our Responsive Login Signup Form. If you have any doubt regarding this, comment below, I will get back to you. Also suggest me some project ideas which you want to build. If you have found this helpful, don't forget subscribe this Blog. Thanks for reading! Take care! Bye Bye.
Post a Comment