Password Generator

Overview

The Password Generator is a web application that allows users to generate random passwords based on selected criteria. Users can specify the length of the password and choose to include uppercase letters, lowercase letters, numbers, and symbols. The generated passwords can be easily copied to the clipboard with a single click.

Features

• Password Length Selection: Users can select the desired length of the password using a slider input.
• Character Type Selection: Users can choose to include uppercase letters, lowercase letters, numbers, and symbols in the generated password.
• Real-time Feedback: The selected password length is displayed in real-time as the user adjusts the slider.
• Password Generation: Two random passwords are generated based on the selected criteria.
• Copy to Clipboard: Users can copy the generated passwords to the clipboard by clicking on the password buttons. When a password is copied, the button text temporarily changes to "Copied!" and the background color changes to provide visual feedback.

Usage

1. Select Password Length: Use the slider to select the desired length of the password. The selected length will be displayed below the slider.
2. Select Character Types: Check the boxes to include uppercase letters, lowercase letters, numbers, and symbols in the password.
3. Generate Passwords: Click the "Generate passwords" button to generate two random passwords based on the selected criteria.
4. Copy Password: Click on either of the generated password buttons to copy the password to the clipboard. The button text will change to "Copied!" and the background color will change to indicate that the password has been copied.

Example

<div id="settings">
    <div id="setting_password_length">
        <h2>Password length:</h2>
        <input id="password_length_slider_input" class="slider" type="range" min="8" max="30" value="16">
        <p id="p_pswd_length"><output id="password_length_slider_value">16</output></p>
    </div>
    <div id="select_boxes">
        <h2>Include:</h2>
        <label><input id="uppercase-el" type="checkbox"> Uppercase</label>
        <label><input id="lowercase-el" type="checkbox"> Lowercase</label>
        <label><input id="numbers-el" type="checkbox"> Numbers</label>
        <label><input id="symbols-el" type="checkbox"> Symbols</label>
    </div>
</div>
<div id="generate_pass">
    <button id="generate_pass_btn" onclick="generatePasswords()">Generate passwords</button>
</div>
<div id="passwords">
    <button id="password_one_btn" onclick="copyPassword('password_one_btn')"></button>
    <button id="password_two_btn" onclick="copyPassword('password_two_btn')"></button>
</div>