creocodigo
Verify Password using JavaScript

Verify Password using JavaScript

Shikhar Baniya's photo
Shikhar Baniya
·

2 min read

Hello Coders! Welcome to JavaScript Animation Blog. In this, we're going to see how to create a functionality in Javascript which checks whether the password we entered is correct or not. And the important part is it checks as soon as you enter something in the textbox. This is a very cool project and helps you understand how you can change things using DOM elements in JavaScript.

Here's a preview-

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html , style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Verify Password (JavaScript)</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
   <form>
      <input type="password" class="password" id="password" 
          placeholder="your password">
      <input type="password" id="checkPassword" class="password" 
          placeholder="confirm your password" onkeyup='check()'>
      <p id="alertPassword"></p>
   </form>
</div>

  <script  src="script.js"></script>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,900&display=swap');
* {
   padding: 0;
   margin: 0;
}
::placeholder{
   color: #a8a8a8;
}
.container {
   width: 100%;
   height: 100vh;   
   background: #f6f7fc;
   display: flex;
   justify-content: center;
   align-items: center;
}
form {
   flex-direction: column;
   display: flex;
   width: 500px;
}
.row {
   position: relative;
}
input.password {
   width: 100%;
   background: transparent;
   border: none;
   border-bottom: 2px solid #232323;
   padding: 0 0 20px 0;
   margin-top: 50px;
   font-family: 'Poppins';
   color: #232323;
   outline: none;
   font-size: 16px;
   letter-spacing: 2px;     
}
span {
   width: 100%;
   display: flex;
   margin: 20px 0px 0px 0px;
   font-family: 'Poppins';
   font-weight: 400;
   text-transform: uppercase;
   font-size: 12px;
   letter-spacing: 2px;
   display: flex;
   align-items: center
}
i, .far {
   margin-right: 15px
}

Step - 4: Below is the JS code for the functionality.

JS

var check = function() {
      if (document.getElementById('password').value ==
          document.getElementById('checkPassword').value) {
          document.getElementById('alertPassword').style.color = '#3aa832';
          document.getElementById('alertPassword').innerHTML = 
            '<span><i class="fas fa-check-circle"></i>Match !</span>';
      } else {
              document.getElementById('alertPassword').style.color = '#ee2b39 ';
          document.getElementById('alertPassword').innerHTML = 
            '<span><i class="fas fa-exclamation-triangle"></i>not matching</span>';
      }
  }

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love

Web DevelopmentwebdevJavaScriptpasswordsWeb Design