How to make a random password generator | Password Generator Js

How to make a random password generator | Password Generator Js

How to make a random password generator | Password Generator Js

Welcome to today’s tutorial. Today we are going to create a Random Password Generator. For this, we are going to use HTML, CSS and Javascript.

 You need basic ES6 knowledge for this javascript project. This tutorial is well suited for javascript intermediates. Let us get started with the project. 

 

The task is to generate a random password that may consist of alphabets, numbers, and special characters. This can be achieved in various ways in this article we will discuss.

 

LIVE SERVER:- 

Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.

 

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

CODE:- 

 Make a string consist of Alphabets(lowercase and uppercase), Numbers and Special Characters. the we will use Math.random() and Math.floor() method to generate a number in between 0 and l-1(where l is length of string).
 
To get the character of the string of a particular index we can use .charAt() method. 
This will keep concatenating the random character from the string until the password of the desired length is obtained.

I have used inline CSS For Styling. 
With the help of inner HTML property of the DOM , I have inserted at last the password.

Math.random() returns a random number between 0 (inclusive),  and 1 (exclusive).
The Math.floor() function returns the largest integer less than or equal to a given number.
We have used internal Javscript and internal CSS in this project

 <!DOCTYPE HTML>  
 <html>  
 <head>  
   <title>  
     Generate a Random Password  
     using JavaScript  
   </title>  
 </head>  
 <body style="text-align:center;">  
   <h1 style="color: red">   
     Random Password generator  
   </h1>  
   <h3>  
     Click on the button to  
     generate random password.  
   </h3>  
   <button onclick="Run()">  
     Click Here  
   </button>  
   <br>  
   <div>  
     <p id="pass"></p>  
   </div>  
   <script>  
     var el_down = document.getElementById("pass");  
     /* Function to generate combination of password */  
     function generateP() {  
       var pass = '';  
       var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +   
           'abcdefghijklmnopqrstuvwxyz0123456789@#$';  
       for (i = 1; i <= 8; i++) {  
         var char = Math.floor(Math.random()  
               * str.length + 1);  
         pass += str.charAt(char)  
       }  
       return pass;  
     }  
     function Run() {  
       el_down.innerHTML = generateP();  
     }  
   </script>  
 </body>  
 </html>

 

I hope you have loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.



Leave a Reply