Build a jQuery Fake Login Page in Browser Using HTML5 CSS3 and Vanilla Javascript Full Project For Beginners

Build a jQuery Fake Login Page in Browser Using HTML5 CSS3 and Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a fake login page in browser using jquery library in html5 css3 and vanilla javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<!--Correct username: invitado / pass: hgm2015-->

<section class="form animated flipInX">
  <h2>Login To Your Account</h2>
  <p class="valid">Valid. Please wait a moment.</p>
  <p class="error">Error. Please enter correct Username & password.</p>
  <form class="loginbox" autocomplete="off">
    <input placeholder="Username" type="text" id="username"></input>
    <input placeholder="Password" type="password" id="password"></input>
<button id="submit">Login</button>
</form>
</section>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

/* Design based on Blue Login Field of Kevin Sleger https://codepen.io/MurmeltierS/pen/macKb */
body {
  background: #44c4e7 url("https://photos-6.dropbox.com/t/2/AAC_bdqR8LMkjEe-HPIf4K1DhtseMLRHPklBSzJSuzglvA/12/5714737/jpeg/1024x768/3/1418346000/0/2/bkg-blur.jpg/CLHm3AIgASgBKAI/b7RrveA2022yJyfO9RyRvv7LjJQESukGHssHUxVThzw") no-repeat center center fixed;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  z-index: -1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: #44c4e7;
  /* IE Fallback */

  background: rgba(68, 196, 231, 0.8);
  width: 100%;
  height: 100%;
}
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  width: 285px;
  margin: -140px 0 0 -182px;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.form h2 {
  margin: 0 0 20px;
  line-height: 1;
  color: #44c4e7;
  font-size: 18px;
  font-weight: 400;
}
.form input {
  outline: none;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  color: #ccc;
  font-family: "Roboto";
  box-sizing: border-box;
  font-size: 14px;
  font-wieght: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: 0.2s linear;
}
.form inputinput:focus {
  color: #333;
  border: 1px solid #44c4e7;
}
.form button {
  cursor: pointer;
  background: #44c4e7;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  color: #fff;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
}
.form button:hover {
  background: #369cb8;
}
.error,
.valid {
  display: none;
}

 

See also  [LIVE CODING] jsPDF Autotable Documentation with Source Code

 

Now make a script.js file and copy paste the following code

 

 

script.js

 

 

$(document).ready(function() {
    //$('#username').focus();

    $('#submit').click(function() {

        event.preventDefault(); // prevent PageReLoad

       var ValidEmail = $('#username').val() === 'invitado'; // User validate
var ValidPassword = $('#password').val() === 'hgm2015'; // Password validate

        if (ValidEmail === true && ValidPassword === true) { // if ValidEmail & ValidPassword
            $('.valid').css('display', 'block');
            window.location = "http://arkev.com"; // go to home.html
        }
        else {
            $('.error').css('display', 'block'); // show error msg
        }
    });
});

 

See also  How to Show and Hide Div on Mouse Click in jQuery Using Javascript Full Project For Beginners

 

Now if you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply