👤Login Form Like Facebook or Google🔑

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here

You have to know difference between Login & Signup
HTML form Tag
HTML input field
HTML Button

Login is the proccess of accessing an existing account. You use the credentials(usually username or email and password) you created during signup to gain entry to your account.

Click the below button then login here

HTML


<div class="logincontainer">

<span style="float:right;position:absolute;color:red;right:35px;cursor:pointer" onclick="this.parentElement.style.display='none';">X</span>

<form action="">

    <div class="image">

        <img src="379 shanto.jpeg" alt="">
    </div>
    <div class="information">

        <label for="uname">Username</label>

        <input type="text" id="uname" placeholder="Enter username..">

        <label for="psw">Password</label>

        <input type="password" id="psw" placeholder="Enter password">

        <button>Login</button>

    </div>

    <div>

        <input type="checkbox" checked>

        <span>Remember me</span> 

    </div>

    <div class="cancel">

        <button>Cancel</button>

        <span>Forget <a href="#">password</a></span>

    </div>

</form>

</div>

JavaScript


function showform(){
    let login=document.querySelector(".logincontainer");

    if(login.style.display=="none"|| login.style.display==""){
        login.style.display="block";
    }
    else{
        login.style.display="none";
    }
    
}

CSS


.image{
    width: 200px;
    height: 200px;
    margin: auto;
    padding-top: 10px;
}
img{
    width:100%;
    height: 100%;
    border-radius: 50%;
}
.information input, .information button{
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    border-radius: 5px;
    margin-top: 6px;
    
}
label{
    
    display: block;
}
.information button{
    background-color: dodgerblue;
}

#login{
    background-color: orange;
    border: none;
    padding:12px 16px;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    cursor: pointer;
}
.cancel button{
    border: none;
    padding: 14px 16px;
    background-color: red;
    color:white;
    border-radius: 5px;
    font-size: 17px;
}
.cancel{
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logincontainer{
    width: 98%;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: bisque;   
    box-shadow: 2px 2px 6px 10px orange;    
    display:none;
        
    animation-name: example;
    animation-duration: 1.1s;
    animation-timing-function: ease-in-out;
    

}
@keyframes example {
    from{opacity: .3;}
    to{opacity: 1;}
    
}

HTML DOM

querySelector: retuns the first element within the document that matches the specified CSS selctor. Example: const sampleElement = document.querySelector('.sample').If there are mutltiple element with the class name 'sample' `querySelector` will return the first matching elements.
You can also use getElementById, getElementByClassName, querySelectorAll etc

String charAt()

The charAt(): method in JavaScript returns the character at a specified index in a string. The index starts from 0. Example: const str = "Hello, World!";
const char = str.charAt(7)

setTimeOut method()

setTimeOut(function-name, millsec): that will execute the provided function after certain millisecond.
clearTimeout(timeoutId) used to cancel time out if needded.

requestAnimationFrame()

requestAnimationFrame(): works by calling the provided callback function before the next repaint, allowing smooth animations.
Example requestAnimationFrame(function_name);

Projects