How To Build Random Password Generator Using JavaScript

How To Build Random Password Generator Using JavaScript

by

In today’s world, cybersecurity has become an increasingly important issue. One of the ways to improve your online security is to use strong and unique passwords. Creating such passwords manually can be time-consuming and difficult to remember. That’s where a random password generator comes in handy.

In this blog post, we will show you how to build your own random password generator using JavaScript. By the end of this tutorial, you will have a handy tool to generate secure passwords in just a few clicks.

Recently I Create a Quiz App using JavaScript if you want to create and use it so please check this post.

Steps To Create a Password Generator Using JavaScript

password generator app

Here are the steps to create a password generator web page:

  1. Plan the layout and functionality of the page: Decide on the look and feel of the page and the options that the user will have for generating a password (e.g., password length, character set).
  2. Set up the HTML: Create the basic structure of the page using HTML. This includes adding a form with inputs for the password options and a button to generate the password.
  3. Style the page with CSS: Add some styling to make the page visually appealing. This can include background colors, font styles, and button styles.
  4. Add JavaScript: Create a JavaScript function to handle the password generation process. This function should use the options selected by the user to generate a random password of the specified length, using the chosen character set.
  5. Display the generated password: The JavaScript function should update the page to display the generated password. This can be done by updating the value of an HTML element on the page, such as a text field.
  6. Test the page: Test the page to make sure that the password generator is working correctly, and make any necessary changes to the code.
  7. Deploy the page: Once you are satisfied with the password generator, you can deploy it to a web server or host it on a platform like GitHub Pages.

By following these steps, you will have a working password generator web page that you can use to generate strong and unique passwords for all of your online accounts.

Video Tutorial Random Password Generator (JavaScript)

If you are a beginner in coding and programming so please watch this video and subscribe to this YouTube Channel for more videos like this.

Video Created by WS-Cube Tech YouTube Channel

Complete Source Code Password Generator

In this project, I am using three languages first one is HTML for basic structure second language is CSS for design and last is JavaScript for logic.

To Create this type of Password Generator App you need to create three files first HTML, Second for CSS, and Last for JavaScript, and paste the given code into your files. Follow these steps to use this source code and make a password generator web page like this.

Here are the steps to use these source codes and create a password generator web page:

  1. First, you need to create a folder with the name Password Generator.
  2. In this folder create three files first one for HTML second for CSS and the last for JavaScript.
  3. Create an HTML file with the name index.html and make sure the file extension must be .html
  4. Create a CSS file with the name style.css and make sure the file extension must be .css
  5. Create a JavaScript file with the name script.js and make sure the file extension must be .js
  6. After that copy the given codes and paste them into your files your password generator web page is ready to use.

HTML FILE CODE

<!DOCTYPE html>
<html lang="en">
    <!-- Created by Coding Pakistan.com -->
<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>Password Generate</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="main">
        <div class="box">
            <span id="pass-box">Testing</span>
            <div class="row">
                <div class="left">
                    Password Length
                </div>
                <div class="right">
                    <input type="number" name="" id="total-char" max="30" min="2" value="10" />
                </div>
            </div>
            <div class="row">
                <label for="upper-case">
                    <div class="left">
                       Contains Uppercase
                    </div>
                </label>
                <div class="right">
                    <input type="checkbox" name="" id="upper-case" checked/>
                </div>
            </div>
            <div class="row">
                <label for="lower-case">
                    <div class="left">
                      Contains Lowercase
                    </div>
                </label>
                <div class="right">
                    <input type="checkbox" name="" id="lower-case" />
                </div>
            </div>
            <div class="row">
                <label for="numbers">
                    <div class="left">
                    Contains Numbers
                    </div>
                </label>
                <div class="right">
                    <input type="checkbox" name="" id="numbers" />
                </div>
            </div>
            <div class="row">
                <label for="symbols">
                    <div class="left">
                    Contains Symbols
                    </div>
                </label>
                <div class="right">
                    <input type="checkbox" name="" id="symbols" />
                </div>
            </div>
            <div class="row">
                <button id="btn">
                    Generate
                </button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS FILE CODE

/* Created by Coding Pakistan.com */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
input:focus-visible {
    outline: 0;
}
.main {
    background-color: #3498db;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    min-width: 400px;
    padding: 10px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 50%);
    background: #2980b9;
    border-radius: 2px;
    margin-top: 10px;
}
#pass-box {
    width: 100%;
    display: block;
    background-color: white;
    font-size: 30px;
    padding: 10px;
    border-radius: 4px;
}
.row {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    color: white;
    font-size: 20px;
}
label {
    user-select: none;
}
#btn {
    width: 100%;
    font-size: 20px;
    outline: 0;
    border: 0;
    padding: 10px;
    background-color: #34495e;
    color: white;
    margin-top: 10px;
    border-radius: 5px;
}

JAVASCRIPT FILE CODE

// Created by Coding Pakistan.com
const upperSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const lowerSet = "abcdefghijklmnopqrstuvwxyz"
const numberSet = "1234567890"
const symbolSet = "~!@#$%^&*()_+/"
// selectors
const passBox = document.getElementById("pass-box")
const totalChar = document.getElementById("total-char")
const upperInput = document.getElementById("upper-case")
const lowerInput = document.getElementById("lower-case")
const numberInput = document.getElementById("numbers")
const symbolInput = document.getElementById("symbols")
const getRandomData = (dataSet) => {
    return dataSet[Math.floor(Math.random() * dataSet.length)]
}
const generatePassword = (password = "") => {
    if (upperInput.checked) {
        password += getRandomData(upperSet)
    }
    if (lowerInput.checked) {
        password += getRandomData(lowerSet)
    }
    if (numberInput.checked) {
        password += getRandomData(numberSet)
    }
    if (symbolInput.checked) {
        password += getRandomData(symbolSet)
    }
    if (password.length < totalChar.value) {
        return generatePassword(password)
    }
    passBox.innerText = truncateString(password, totalChar.value);
}
generatePassword();
document.getElementById("btn").addEventListener(
    "click",
    function() {
        generatePassword();
    }
)
function truncateString(str, num) {
    if (str.length > num) {
        let subStr = str.substring(0, num);
        return subStr;
    } else {
        return str;
    }
}
After that, your Random Password Generator web page is ready to use if you want to preview this web page so Click this Password Generator link.
You Might Like This

Conclusion

Building a random password generator using JavaScript is a fun and educational project that can help improve your online security. With the steps outlined in this blog post, you now have the knowledge and tools to create your own password generator.

Whether you are a beginner or an experienced developer, this project is a great way to expand your skills and build something useful. So why not give it a try and see what you can create? Don’t forget to share your results and any modifications you make to the code. Happy coding!

Leave a Comment