Scribd Logo
Upload

Welcome to Scribd!

  • Pass

    Uploaded by

    Saif Jutt
    15 views1 page

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views1 page

    Pass

    Uploaded by

    Saif Jutt

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    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> <style> body { font-family: 'Arial', sans-serif; text-align:
    center; background-color: #f4f4f4; color: #333; margin: 0; padding: 0; display:
    flex; flex-direction: column; align-items: center; justify-content: center; height:
    100vh; } .container { background-color: #f9f9f9; border: 1px solid #ddd; border-
    radius: 10px; padding: 20px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition:
    background-color 0.3s, opacity 0.5s; /* Added fade-in transition */ display: flex;
    flex-direction: column; align-items: center; opacity: 0; /* Initially set to 0 for
    fade-in effect */ animation: fadeIn 0.5s ease-in-out forwards; /* Added fade-in
    animation */ } @keyframes fadeIn { to { opacity: 1; } } h1 { margin-bottom: 20px;
    font-size: 24px; } #password { margin: 20px 0; padding: 10px; font-size: 20px;
    width: 80%; box-sizing: border-box; } button { font-size: 18px; padding: 10px;
    cursor: pointer; margin: 5px; border: none; border-radius: 5px; background-color:
    #4CAF50; color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition:
    background-color 0.3s, transform 0.2s; } button:hover { background-color: #45a049;
    transform: scale(1.05); } button:active { animation: bounce 0.3s ease-in-out; /*
    Added bounce animation on click */ } @keyframes bounce { 0%, 20%, 50%, 80%, 100%
    { transform: translateY(0); } 40% { transform: translateY(-20px); } 60%
    { transform: translateY(-10px); } } input[type="range"] { width: 80%; margin: 10px
    0; } label { font-size: 18px; margin-right: 5px; } .form-group { display: flex;
    align-items: center; margin-bottom: 10px; } </style> </head> <body> <div
    class="container"> <h1>Password Generator</h1> <div class="form-group"> <label
    for="length">Password Length: </label> <input type="range" id="length" min="8"
    max="20" value="12" oninput="updateLengthValue()"> <span id="lengthValue">12</span>
    </div> <div class="form-group"> <label><input type="checkbox" id="uppercase">
    Uppercase</label> <label><input type="checkbox" id="lowercase" checked>
    Lowercase</label> <label><input type="checkbox" id="numbers" checked>
    Numbers</label> <label><input type="checkbox" id="symbols"> Symbols</label> </div>
    <button onclick="generatePassword()">Generate Password</button> <input type="text"
    id="password" readonly> <button onclick="copyPassword()">Copy Password</button>
    <button onclick="changeBackground()">Change Background</button> </div> <script>
    function generatePassword() { const length =
    document.getElementById("length").value; const uppercase =
    document.getElementById("uppercase").checked; const lowercase =
    document.getElementById("lowercase").checked; const numbers =
    document.getElementById("numbers").checked; const symbols =
    document.getElementById("symbols").checked; let charset = ""; if (uppercase)
    charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; if (lowercase) charset +=
    "abcdefghijklmnopqrstuvwxyz"; if (numbers) charset += "0123456789"; if (symbols)
    charset += "!@#$%^&*()_-+=<>?"; let password = ""; for (let i = 0; i < length; i++)
    { const randomIndex = Math.floor(Math.random() * charset.length); password +=
    charset.charAt(randomIndex); } const passwordField =
    document.getElementById("password"); passwordField.value = password; // Triggering
    the shake animation const container = document.querySelector('.container');
    container.classList.remove('shake'); void container.offsetWidth; // Trigger reflow
    to restart the animation container.classList.add('shake'); } function
    copyPassword() { const passwordField = document.getElementById("password");
    passwordField.select(); passwordField.setSelectionRange(0, 99999);
    document.execCommand("copy"); alert("Password copied to clipboard!"); } function
    changeBackground() { const container = document.querySelector('.container'); const
    colors = ['#ffe6e6', '#e6f7ff', '#e6ffe6', '#ffffcc', '#f2f2f2']; const randomColor

    You might also like