Random Password Generator with HTML,CSS
and JavaScript
The program that generates user-specified random passwords is called the Password Generator. Secret word generators can be in various UI plans with capabilities. For instance, some Secret word generator creates feeble passwords, some medium, and some solid, and alongside the reinforcing of the secret phrase, their personality can be different which relies upon the coding.
Investigate the given picture of our Arbitrary Secret key Generator. As you can find in the picture there is a secret key field with major areas of strength for a. Strong passwords include any combination of small, capital, special, and alphabetic characters with a respectable length. All things considered, our program will likewise assist us with making a wide range of passwords with custom lengths.
By the secret phrase field, there is a duplicate symbol which clearly is for replicating the secret phrase which is displayed in the secret word field. Beneath the secret key field, there is a reach slider that assists us with making the length of the secret word as we need and under the reach slider, there is a button that is utilized to create passwords.
Random Password Generator
Random Password Generator with HTML,CSS and JavaScript [Source Codes]
To Create Random Password Generator with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!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>
- <link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
- </head>
- <body>
- <div class="container">
- <h1>Password Generator</h1>
- <div class="password-container">
- <input type="text" id="passwordDisplay" readonly>
- <button id="generateButton">Generate Password</button>
- <button id="copyButton"><i class="far fa-copy"></i></button>
- <div id="strengthIndicator" class="strength-indicator"></div>
- </div>
- </div>
-
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- body {
- font-family: Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #f7f7f7;
- }
-
- .container {
- text-align: center;
- background: #fff;
- padding: 40px 40px;
- width: 420px;
- border-radius: 5px;
- box-shadow: 0 0 15px rgba(0,0,0,0.2);
- }
-
- .password-container {
- margin-top: 20px;
- }
- .box{width: 100%;
- height: 100%;
-
- }
- input[type="text"] {
- width: 300px;
- padding: 12px;
- margin-bottom: 10px;
- border: 1px solid lightgrey;
- padding-left: 15px;
- outline: none;
- border-radius: 5px;
- font-size: 17px;
- transition: all 0.3s;
- }
-
- button {
- padding: 15px 18px;
- cursor: pointer;
- background-color: #4caf50;
- color: white;
- border: none;
- border-radius: 4px;
-
- }
- button:hover
- .strength-indicator {
- margin-top: 10px;
- }
-
- button#copyButton {
- padding: 15px;
- cursor: pointer;
- background-color: #4caf50;
- color: white;
- border: none;
- border-radius: 4px;
- margin-left: 5px;
- }
Now paste the following codes into your script.js file
- const passwordDisplay = document.getElementById("passwordDisplay");
- const generateButton = document.getElementById("generateButton");
- const strengthIndicator = document.getElementById("strengthIndicator");
-
- generateButton.addEventListener("click", generatePassword);
-
- function generatePassword() {
- const length = 12;
- const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_=+";
- let password = "";
-
- for (let i = 0; i < length; ++i) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- password += charset[randomIndex];
- }
-
- passwordDisplay.value = password;
- checkStrength(password);
- }
-
- function checkStrength(password) {
- const strength = calculateStrength(password);
- const strengthText = ["Weak", "Moderate", "Strong", "Very Strong"];
- const strengthColor = ["#ff0000", "#ffa500", "#ffd700", "#008000"];
- const strengthIndex = Math.min(Math.floor(strength / 25), 3);
-
- strengthIndicator.textContent = `Password Strength: ${strengthText[strengthIndex]}`;
- strengthIndicator.style.color = strengthColor[strengthIndex];
- }
-
- function calculateStrength(password) {
- const regexList = [/[$&+,:;=?@#|'<>.^*()%!-]/, /[A-Z]/, /[0-9]/, /.{8,}/];
- let strength = 0;
-
- for (const regex of regexList) {
- if (regex.test(password)) {
- strength += 25;
- }
- }
-
- return strength;
- }
-
- const copyButton = document.getElementById("copyButton");
- copyButton.addEventListener("click", copyPassword);
-
- function copyPassword() {
- const passwordText = document.getElementById("passwordDisplay");
- passwordText.select();
- document.execCommand("copy");
- alert("Password copied to clipboard!");
- }
If you face any difficulties while creating your Random Password Generator or your code is not working as expected, you can download the source code files for this Password Generator by clicking on the download button.