Skip to content

Files

Latest commit

 

History

History

2. Random Password Generator

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
index.html
index.html
 
 
random password generator output.png
random password generator output.png
 
 
script.js
script.js
 
 
style.css
style.css
 
 

README.md

Random Password Generator (HTML, CSS, and Js)

alt text

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Password Generator</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
    
<body>
    <div class="container">Generate a <br> Random Password</div>
    <div class="display">
        <input type="text" id="password" placeholder="Password">
        <input type="button" value="copy" id="copy" onclick="copyPassword()">
    </div>
    <div class="generatebutton">
        <input onclick="generatePassword()" type="button" value="Generate Password" id="GeneratePassword">
    </div>
</body>

</html>

Javascript

const passwordBox = document.getElementById("password");
const length = 16;
const upperCase = "QWERTYUIOPASDFGHJKLZXCVBNM";
const lowerCase = "qwertyuiopasdfghjklzxcvbnm"
const number = "1234567890";
const symbol = "!@#$%^&*()_+~`|}{[]\:;?><,./-=";
const allChar = upperCase + lowerCase + number + symbol;

function generatePassword() {
    let password = "";

    // let passwords = password.length;
    password += upperCase[Math.floor(Math.random() * upperCase.length)];
    password += lowerCase[Math.floor(Math.random() * lowerCase.length)];
    password += number[Math.floor(Math.random() * number.length)];
    password += symbol[Math.floor(Math.random() * symbol.length)];

    // get the password until 12 digits 

    while (length > password.length) {
        password += allChar[Math.floor(Math.random() * allChar.length)];

    }
    passwordBox.value = password;

}

function copyPassword() {
    passwordBox.select(); // select the text inside the password box
    // document.execCommand('Copy'); // copy it to clipboard
    passwordBox.execCommand("copy")
    alert("Copied to clipboard!");
}

CSS

body{
    background-color: rgb(93, 153, 213);
    margin-left: 100px;
    margin-top: 150px;
}
.container{
    color: rgb(10, 28, 61);
    font-size: 50px;
    font-family:Arial, Helvetica, sans-serif ;
}
#password{
    /* color: rgb(165, 178, 202); */
    font-size: 30px;
    margin-top: 30px;
    border-radius: 5px;

    padding: 15px;


}
#copy{
    /* margin-top: 30px; */
    font-size: 38px;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
}
#GeneratePassword{
    padding: 10px;;
    margin-top: 10px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;

}

#GeneratePassword:hover{
    background-color: rgb(17, 39, 80);
    color: rgb(255, 255, 255);
    border-radius: 10px;
}
#copy:hover{
    background-color: rgb(17, 39, 80);
    color: rgb(255, 255, 255);
    border-radius: 10px;

}