Password-Generator/secondBuild/web.html at master · nickyfr33ze/Password-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- This is the HTML file for the Password Generator. Inside is a script to generate and copy the password and is meant to be a minimal application to be hosted locally. -->
<!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>
    </head>
    <body>
        <h1>Password Generator</h1>
        <p id="copy-message" class="hidden">Password copied! Remember to use a password manager.</p>
        <div class="password-box" id="password"></div>
        <button class="copy-btn" onclick="copyToClipboard()">Copy to Clipboard</button>
        <p id="copy-message">Password copied! Remember to use a password manager.</p>
        <script>
            function generatePassword() {
                var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Lists all the possible characters for the password.
                // Todo: Should be determined by the user in the web UI.
                var passwordLength = 12; // The length of the password.
                var password = ""; // The generated password will be stored here.
                for (var i = 0; i < passwordLength; i++) { // Loops through the password length.
                    var randomNumber = Math.floor(Math.random() * chars.length);
                    password += chars.substring(randomNumber, randomNumber + 1); // Adds a random character to the password.
                }
                document.getElementById("password").innerText = password;
            }

            function copyToClipboard() {    // Function to copy the password to the clipboard.
                var passwordText = document.getElementById("password").innerText;
                navigator.clipboard.writeText(passwordText).then(function() {   // Makes use of the navigator.clipboard API to write the password to the clipboard.
                    var message = document.getElementById("copy-message");   // Displays a message to the user that the password has been copied.
                    message.style.display = "block";   // Displays the message.
                    setTimeout(function() {  // Hides the message after 3 seconds.
                        message.style.display = "none";  // Hides the message.
                    }, 3000);  // 3 seconds.
                });
            }
        </script>
    </body>
</html>