Random Password Generator Using JavaScript

In this Project, We will create a random password generator using JavaScript that consist of alphabets ( Uppercase and Lowercase ), numbers and special characters. This project can be achieved in this article which are discussed below to solve the problem.

Step 1: Create a string consist of Alphabets, Numbers and Special Characters, we will use Math.random() method to generate a password depend on the length password which given by user and by which you can create new and unique password.

Step 2: In this code 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) then convert it to base36(which will consist of 0-9, A-Z and a-z in lowercase ) using .toString() method. For Uppercase letter, lowercase letter, Numbers and Special character create a varibale chars that contain all characters to generate the password.

For more information about the code, Please visit Source Code given below.

index.html

        
        <!-- Created By Sagar Developer -- >
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Password Generate - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h2>Random Password Generate</h2>
        <input type="text" placeholder="Enter Password" id="password">
        <div id="btn" onclick="GetPassword();">Password Generate</div>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

        
        <!-- Created By Sagar Developer -- >

* {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
    user-select: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f5bbbb;
}

.container {
    position: relative;
    width: 440px;
}

.container h2 {
    font-size: 28px;
    color: #0a0909;
    margin-bottom: 15px;
}

.container input {
    position: relative;
    width: 100%;
    height: 60px;
    border: none;
    margin: 15px 0 20px;
    background: transparent;
    outline: none;
    padding: 0 20px;
    font-size: 24px;
    letter-spacing: 4px;
    border-radius: 8px;
    color: #080707;
    box-shadow: -4px -4px 10px rgba(255, 255, 255, 1), inset 4px 4px 10px rgba(0, 0, 0, .30), inset -4px -4px 10px rgba(255, 255, 255, 1), inset 4px 4px 10px rgba(0, 0, 0, .30);
}

.container input::placeholder {
    letter-spacing: 0px;
    color: #252222;
}

.container #btn {
    position: relative;
    cursor: pointer;
    color: #fff;
    background: #0479da;
    font-size: 24px;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
}

.container #btn:active {
    background: #4727b0;
}

script.js

        
        <!-- Created By Sagar Developer -- >

function Getpassword() {
    var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+?/><:{}[]";
    var PasswordLength = 9;
    var password = '';

    for (var i = 0; i < PasswordLength; i++) {
        var randomNumber = Math.floor(Math.random() * chars.length);
        password += chars.substring(randomNumber, randomNumber + 1);
    }
    document.getElementById("password").value = password;
}

Sagar Developer

How To Build A Unique Password Generator Using JavaScript.

Random Password Generator Using JavaScript

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

How To Build A Unique Password Generator Using JavaScript.

Random Password Generator Using JavaScript

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form