Password Generator Using JavaScript with Source Code

  • Post author:
  • Post comments:0 Comments
  • Reading time:174 mins read

Unlock the world of secure online practices with our Password Generator project using JavaScript. In this article, we’ll walk you through the development process and provide the source code to create a robust tool that generates strong, randomized passwords, enhancing your digital security and simplifying the process of creating secure login credentials.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
    <div class="container">
        <h1 class="title">Password Generator</h1>
        <p class="password">Your Password</p>
        <button class="btn" id="btn-generate">GENERATE!</button>
        <p class="desc-title">Preferences</p>
        <form class="form">
            <label for="password-length-number">Length</label>
            <input type="number" name="pln" id="password-length-number" class="number-input" min="1" max="50" value="8">

            <label for="lowercase">Lower Case Alphabets</label>
            <input type="checkbox" name="lc" id="lowercase" checked>

            <label for="lowercase">Upper Case Alphabets</label>
            <input type="checkbox" name="uc" id="uppercase">

            <label for="lowercase">Numbers</label>
            <input type="checkbox" name="num" id="numbers">

            <label for="lowercase">Symbols</label>
            <input type="checkbox" name="sym" id="symbols">
        </form>
    </div>
    <script src="./script.js" type="text/javascript"></script>
</body>
</html>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    font-size: 10px;
    font-family: 'lato', Arial, Helvetica, sans-serif;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(115deg, #85ee56 50%, #144dd5 50%);
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #eee;
    border-radius: 0.5rem;
    padding: 2rem;
    min-height: 35rem;
}
.title {
    width: 71%;
    text-align: center;
}
.desc-title {
    font-size: 1.6rem;
    text-align: left;
    width: 71%;
    border-bottom: 1px solid #144dd5;
}
.form {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 1rem;
    column-gap: 3rem;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
label{
    font-weight: bold;
}
.number-input {
    width: 4rem;
}
.password {
    background: black;
    color: white;
    padding: 1rem;
    font-size: 1.5rem;
    height: 6rem;
    width: 28rem;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
    border-radius: 0.5rem;
}
.btn {
    cursor: pointer;
    border: none;
    background: #144dd5;
    border-radius: 0.5rem;
    padding: 1rem;
    width: 100%;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.3rem;
    transition: opacity ease-in-out 0.2s;
}
.btn:hover {
    opacity: 0.9;
}



//DOM Elements
const passwordElem = document.querySelector('.password');
const btnElem = document.getElementById('btn-generate');
const passwordLengthElem = document.getElementById('password-length-number');
const lowercaseElem = document.getElementById('lowercase');
const uppercaseElem = document.getElementById('uppercase');
const numbersElem = document.getElementById('numbers');
const symbolsElem = document.getElementById('symbols');

//when user clicks on btn, generate a new password
btnElem.addEventListener('click', updateUI);

//display generated password on UI
function updateUI(){
    const passwordLength = passwordLengthElem.value;
    const includeLowercase = lowercaseElem.checked;
    const includeUppercase = uppercaseElem.checked;
    const includeNumbers = numbersElem.checked;
    const includeSymbols = symbolsElem.checked;
    const password = generatePassword(passwordLength, includeLowercase, includeUppercase, includeNumbers, includeSymbols);
    passwordElem.innerText = password;
}

function generatePassword(len, isLC, isUC, isNum, isSym){
    let charCodes = [];
    if(isLC)
        charCodes = LOWERCASE_CHAR_CODES;
    if(isUC)
        charCodes = charCodes.concat(UPPERCASE_CHAR_CODES);
    if(isNum)
        charCodes = charCodes.concat(NUMBER_CHAR_CODES);
    if(isSym)
        charCodes = charCodes.concat(SYMBOL_CHAR_CODES);
        
    const finalPassword = [];
    for(let i = 0; i < len; i++){
        const randomCode = charCodes[Math.floor(Math.random() * charCodes.length)];
        finalPassword.push(String.fromCharCode(randomCode));
    }

    //if all of the checkbox are unchecked
    if(charCodes.length === 0) 
        return `Select at least one option`;
    
    return finalPassword.join(''); //return string of array finalPassword    
}

function arrayLowToHigh(low, high){
    let array = [];
    for(let i = low; i <= high; i++){
        array.push(i);
    }
    return array;
}

//Arrays storing all our characters
const LOWERCASE_CHAR_CODES = arrayLowToHigh(97, 122);
const UPPERCASE_CHAR_CODES = arrayLowToHigh(65, 90);
const NUMBER_CHAR_CODES = arrayLowToHigh(48, 57);
const SYMBOL_CHAR_CODES = arrayLowToHigh(33, 47)
                          .concat(arrayLowToHigh(58, 64))
                          .concat(arrayLowToHigh(91, 96))
                          .concat(arrayLowToHigh(123, 126));
ideasorblogs
Latest posts by ideasorblogs (see all)
Tags: , ,

Leave a Reply