Password Generator Display

INFORMATION & CODE

Password Generator Display

What the Code Does

The code creates a password generator using three parts: HTML provides the structure and controls, CSS controls the appearance, and JavaScript provides the functionality. When the page loads, the user sees a password display, a copy button, a character-length slider and number field, options for uppercase letters, numbers and symbols, and a Generate Password button.

How the Code Workes

The HTML creates the user interface. The <h3> with the ID passwordDisplay is where the generated password appears. The range slider and number input allow the user to choose a password length between 1 and 16 characters. The three checkboxes allow uppercase letters, numbers and symbols to be included. The form's submit button starts the password-generation process, while the Copy Password button copies the displayed password to the clipboard.

The CSS controls the visual design. .pwd-container creates the main blue password-generator panel, while .form uses CSS Grid to arrange the labels and controls. The .password-display class styles the area where the password is shown. The checkboxes, slider, buttons, borders, colours, fonts and hover effects are also customised to give the generator its retro-style appearance.

The JavaScript connects the HTML controls to the password-generation logic. getElementById() obtains references to the different inputs and buttons so JavaScript can interact with them. The character-code arrays represent lowercase letters, uppercase letters, numbers and symbols. For example, character codes 65 through 90 represent A through Z, while 97 through 122 represent a through z.

When the user changes either the slider or the number field, syncCharacterAmount() runs. It takes the value entered by the user, restricts it to the range of 1–16, and then updates both controls. This means the slider and number box always display the same character length.

When Generate Password is clicked, the form's submit event runs. e.preventDefault() stops the form from refreshing the page. The script reads the requested length and checks which options have been selected. These settings are passed to generatePassword(), which starts with lowercase letters and adds uppercase letters, numbers and symbols to the available character pool according to the user's selections.

The password is then created using a for loop. On each iteration, Math.random() selects a random character from the available character pool. String.fromCharCode() converts the selected numerical character code into an actual character, and the characters are collected into an array. Finally, join('') combines them into a complete password, which is placed into the passwordDisplay element.

The Copy Password functionality is handled by initPasswordCopy(). It obtains the password using passwordDisplay.textContent and uses the browser's navigator.clipboard.writeText() API to copy it. If copying succeeds, the button temporarily changes from "Copy Password" to "Copied!" for 1.5 seconds. If copying fails, an error is reported and the user receives an alert.

How to Use the Code

To use the generator, open the HTML file in a browser with styles.css and scripts.js in the appropriate locations. Choose the desired number of characters using either the slider or number box, select any character types you want to allow, and click Generate Password. The generated password will appear in the display box. Clicking Copy Password then copies it so it can be pasted elsewhere.

One important detail is that the current generator does not guarantee that every selected character type will actually appear. For example, selecting "Include Numbers" makes numbers available, but a particular randomly generated password could still contain no numbers. It also always includes lowercase letters.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Split Button</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="pwd-container">
      <h1 class="item-title">Password Generator</h1>
      <h3 class="password-display" id="passwordDisplay">password</h3>
      <button id="passwordCopy" onclick="initPasswordCopy()">Copy Password</button>
      <form id="passwordGeneratorForm" class="form">
        <label for="characterAmountNumber">Number Of Characters</label>
        <div class="character-amount-container">
          <input type="range" min="1" max="16" value="4" class="range-slider" id="characterAmountRange">
          <input class="number-input" type="number" min="1" max="16" value="4" id="characterAmountNumber">
        </div>
        <label for="includeUppercase">Include Uppercase</label>
        <label class="tick">
          <input type="checkbox" class="checkbox" id="includeUppercase">
          <span class="checkmark"></span>
        </label>
        <label for="includeNumbers">Include Numbers</label>
        <label class="tick">
          <input type="checkbox" class="checkbox" id="includeNumbers">
          <span class="checkmark"></span>
        </label>
        <label for="includeSymbols">Include Symbols</label>
        <label class="tick">
          <input type="checkbox" class="checkbox" id="includeSymbols">
          <span class="checkmark"></span>
        </label>
        <button type="submit" class="btn">Generate Password</button>
      </form>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      .item-title {
        position: relative;
        margin-left: 0px;
        color: #bfdfff;
        font-family: 'VT323', cursive;
        font-size: 30px;
        text-shadow: 0 0 1px #000, 2px 2px #555;
        text-align: center;
      }
      
      .pwd-container {
        max-width: 600px;
        background-color: #80a0c0;
        padding: 3rem 2rem;
        margin: 10px auto 0 auto;
        border: 12px double #b0d0f0;
        outline: 2px solid #b0d0f0;
        outline-offset: -25px;
        border-radius: 1rem;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      
      .focus.container {
        display: flex;
      }
      
      .active.container {
        display: none;
      }
      h1 {
        font-family: 'VT323', cursive;
        font-size: 2.5rem;
      }
      .form {
        width: 100%;
        padding: 50px;
        display: grid;
        grid-template-columns: auto auto;
        row-gap: 1rem;
        column-gap: 4rem;
        justify-content: center;
        align-items: center;
      }
    
      label {
        width: 110px;
        margin-left: 30px;
        font-family: 'VT323', cursive;
        font-size: 18px;
        font-weight: bold;
      }

      .character-amount-container {
        display: flex;
        align-items: center;
      }
      .range-slider {
        margin-left: -60px;
        -webkit-appearance: none;
        appearance: none;
        background-color: #bfdfff;
        height: 6px;
        border-radius: 3px;
      }
      .range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        background-color: #a0c0e0;
        border-radius: 50%;
        cursor: pointer;
      }
      .number-input {
        width: 4rem;
        padding: 5px 2px;
        background-color: #bfdfff;
        border: 2px solid #6080a0;
        border-radius: 5px
      }

      .password-display {
        background-color: #bfdfff;
        color: #6080a0;
        border: 2px solid #6080a0;
        height: 2rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
        border-radius: 10px;
      }

      #passwordCopy {
        width: 50%;
        background-color: #b0d0f0;
        border: 2px solid #6080a0;
        color: #6080a0;
        padding: .5rem 1rem;
        margin: 20px 25% 20px 25%;
        font-weight: bold;
        cursor: pointer;
        border-radius: 10px;
      }

      #passwordCopy:hover {
        background-color: #FFFFFF33;
      }
      
      input[type="checkbox"] {
        position: relative;
        top: 4px;
        -webkit-appearance: none;
        width: 21px;
        height: 21px;
        background-color: #bfdfff;
        border: 2px solid #6080a0;
        border-radius: 4px;
      }
      input[type="checkbox"]:checked {
        position: relative;
        width: 20px;
        height: 20px;
        top: 10px;
        background-color: #0a0;
        border: 2px solid #070;
        color: #fff;
      }
      .checkmark:after {
        content: "";
        position: relative;
        display: none;
      }

      input[type="checkbox"]:checked ~ .checkmark:after {
        display: block;
      }

      .tick .checkmark:after {
        position: relative;
        left: 11px;
        top: -18px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       transform: rotate(45deg);
     }
     .btn {
       width: 80%;
       grid-column: span 2;
       background-color: #b0d0f0;
       border: 2px solid #6080a0;
       color: #6080a0;
       padding: .5rem 1rem;
       margin: auto;
       font-weight: bold;
       cursor: pointer;
       border-radius: 10px;
     }

     .btn:hover {
       background-color: #FFFFFF33;
     }

JAVASCRIPT


                const characterAmountRange = document.getElementById('characterAmountRange');
const characterAmountNumber = document.getElementById('characterAmountNumber');

const includeUppercaseElement = document.getElementById('includeUppercase');
const includeNumbersElement = document.getElementById('includeNumbers');
const includeSymbolsElement = document.getElementById('includeSymbols');

const form = document.getElementById('passwordGeneratorForm');
const passwordDisplay = document.getElementById('passwordDisplay');
const passwordCopy = document.getElementById('passwordCopy');


// Character code ranges
const UPPERCASE_CHAR_CODES = arrayFromLowToHigh(65, 90);
const LOWERCASE_CHAR_CODES = arrayFromLowToHigh(97, 122);
const NUMBER_CHAR_CODES = arrayFromLowToHigh(48, 57);

const SYMBOL_CHAR_CODES = [
    ...arrayFromLowToHigh(33, 47),
    ...arrayFromLowToHigh(58, 64),
    ...arrayFromLowToHigh(91, 96),
    ...arrayFromLowToHigh(123, 126)
];


// Keep the range and number inputs synchronized
characterAmountNumber.addEventListener('input', syncCharacterAmount);
characterAmountRange.addEventListener('input', syncCharacterAmount);


// Generate password when the form is submitted
form.addEventListener('submit', function (e) {
    e.preventDefault();

    const characterAmount = Number(characterAmountNumber.value);

    const includeUppercase = includeUppercaseElement.checked;
    const includeNumbers = includeNumbersElement.checked;
    const includeSymbols = includeSymbolsElement.checked;

    const password = generatePassword(
        characterAmount,
        includeUppercase,
        includeNumbers,
        includeSymbols
    );

    passwordDisplay.textContent = password;
});


// Copy password to clipboard
passwordCopy.addEventListener('click', initPasswordCopy);

async function initPasswordCopy() {
    const password = passwordDisplay.textContent;

    if (!password) {
        return;
    }

    try {
        await navigator.clipboard.writeText(password);

        // Change button text temporarily
        const originalText = passwordCopy.textContent;
        passwordCopy.textContent = 'Copied!';

        setTimeout(() => {
            passwordCopy.textContent = originalText;
        }, 1500);

    } catch (error) {
        console.error('Failed to copy password:', error);
        alert('Unable to copy the password.');
    }
}


// Generate the password
function generatePassword(
    characterAmount,
    includeUppercase,
    includeNumbers,
    includeSymbols
) {
    let charCodes = [...LOWERCASE_CHAR_CODES];

    // Add the requested character types
    if (includeUppercase) {
        charCodes = charCodes.concat(UPPERCASE_CHAR_CODES);
    }

    if (includeNumbers) {
        charCodes = charCodes.concat(NUMBER_CHAR_CODES);
    }

    if (includeSymbols) {
        charCodes = charCodes.concat(SYMBOL_CHAR_CODES);
    }

    const passwordCharacters = [];

    for (let i = 0; i < characterAmount; i++) {
        const randomIndex = Math.floor(Math.random() * charCodes.length);
        const characterCode = charCodes[randomIndex];

        passwordCharacters.push(
            String.fromCharCode(characterCode)
        );
    }

    return passwordCharacters.join('');
}


// Create an array of character codes
function arrayFromLowToHigh(low, high) {
    const array = [];

    for (let i = low; i <= high; i++) {
        array.push(i);
    }

    return array;
}


// Synchronize the range slider and number input
function syncCharacterAmount(e) {
    let value = Number(e.target.value);

    // Keep value within allowed range
    value = Math.min(Math.max(value, 1), 16);

    characterAmountNumber.value = value;
    characterAmountRange.value = value;
}

MENU

INFORMATION & CODE