A Pen by Dovineowuor on CodePen.
Created
November 21, 2022 12:27
-
-
Save Dovineowuor/b31c54687bfa0fbb0d7e63d05ddfe32e to your computer and use it in GitHub Desktop.
Password Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Password Generater</title> | |
| </head> | |
| <body> | |
| <div class="body"> | |
| <div id="content"> | |
| <h1> Password Generator</h1> | |
| <div id="generator"> | |
| <div class="box"> | |
| <h2>Password Generater</h2> | |
| <input type="text" name="" placeholder="Your secure password" id="password" readonly=""> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th> | |
| <div id="button" class="btn1" onclick="genPassword()">Generate</div> | |
| </th> | |
| <th><a id="button" class="btn2" onclick="copyPassword()">Copy</a></th> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </htlm> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var password = document.getElementById("password"); | |
| function genPassword() { | |
| var chars = | |
| "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; | |
| var passwordLength = 12; | |
| var password = ""; | |
| for (var i = 0; i <= passwordLength; i++) { | |
| var randomNumber = Math.floor(Math.random() * chars.length); | |
| password += chars.substring(randomNumber, randomNumber + 1); | |
| } | |
| document.getElementById("password").value = password; | |
| } | |
| function copyPassword() { | |
| var copyText = document.getElementById("password"); | |
| copyText.select(); | |
| copyText.setSelectionRange(0, 999); | |
| document.execCommand("copy"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| user-select: none; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #f1f2e9; | |
| justify-content: center; | |
| align-items: center; | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| .box { | |
| background-color: white; | |
| padding-top: 30px; | |
| padding: 30px; | |
| } | |
| .box h2 { | |
| margin-bottom: 40px; | |
| text-align: center; | |
| font-size: 26px; | |
| color: #015a96; | |
| font-family: sans-serif; | |
| } | |
| input { | |
| padding: 20px; | |
| user-select: none; | |
| height: 50px; | |
| width: 400px; | |
| border-radius: 6px; | |
| border: none; | |
| border: 2px solid rgb(13, 152, 245); | |
| outline: none; | |
| font-size: 22px; | |
| } | |
| input::placeholder { | |
| font-family: sans-serif; | |
| display: flex; | |
| justify-content: space-between; | |
| align-text: center; | |
| font-size: small; | |
| } | |
| #button { | |
| font-family: sans-serif; | |
| font-size: 15px; | |
| margin-top: 40px; | |
| border: 2px solid rgb(20, 139, 250); | |
| width: 155px; | |
| height: 50px; | |
| text-align: center; | |
| background-color: #0c81ee; | |
| display: flex; | |
| color: rgb(255, 255, 255); | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| border-radius: 7px; | |
| } | |
| .btn2 { | |
| margin-left: 85px; | |
| } | |
| #button:hover { | |
| color: white; | |
| background-color: lightgreen; | |
| } | |
| #placeholder { | |
| align: center; | |
| colour: #e9f0f2; | |
| } | |
| h1 { | |
| margin-bottom: 40px; | |
| text-align: center; | |
| font-size: 26px; | |
| color: #111212; | |
| font-family: sans-serif; | |
| } | |
| .content { | |
| border-style: dashed; | |
| } | |
| input{ | |
| width: | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment