|
1 | | -# js-password-generator |
2 | | -it enables you to generate your own passwords with different degrees of power and security and adjust them to the length, characters, etc. You can include it in your website very easily, where no outside libraries have been used. Only Java Script. |
| 1 | +# JS-Password-Generator :lock_with_ink_pen: |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +It enables you to generate your own passwords with different degrees of power and security and adjust them to the length, characters, etc. You can include it in your website very easily, where no outside libraries have been used. Only Java Script. |
| 6 | + |
| 7 | +This writing method is not the only one and you can generate the same results in different ways in the same language. |
| 8 | +I hope it's useful to you in your work, and I'm going to constantly improve its coordination and add new features to it. |
| 9 | + |
| 10 | +- Explain Code </br> |
| 11 | +Here we use some function to generate a strings from Uppercase and lowercase letters, numbers and symbols |
| 12 | +```java-script |
| 13 | +function getRandomLower() { |
| 14 | + return String.fromCharCode(Math.floor(Math.random() * 26) + 97); |
| 15 | +} |
| 16 | +
|
| 17 | +function getRandomUpper() { |
| 18 | + return String.fromCharCode(Math.floor(Math.random() * 26) + 65); |
| 19 | +} |
| 20 | +
|
| 21 | +function getRandomNumber() { |
| 22 | + return String.fromCharCode(Math.floor(Math.random() * 10) + 48); |
| 23 | +} |
| 24 | +
|
| 25 | +function getRandomSymbol() { |
| 26 | + const symbols = "!@#$%^&*(){}[]=/<>,." |
| 27 | + return symbols[Math.floor(Math.random() * symbols.length)]; |
| 28 | +} |
| 29 | +
|
| 30 | +const randomFunc = { |
| 31 | + lower: getRandomLower, |
| 32 | + upper: getRandomUpper, |
| 33 | + number: getRandomNumber, |
| 34 | + symbol: getRandomSymbol, |
| 35 | +}; |
| 36 | +``` |
| 37 | +This is the code that executes the command when the button is pressed in order to collect and generate those values |
| 38 | +```java-script |
| 39 | +const generate = document.getElementById("generateBtn"); |
| 40 | +generate.addEventListener("click", () => { |
| 41 | + const length = document.getElementById("PasswordLength").value; |
| 42 | + const hasUpper = document.getElementById("uppercase").checked; |
| 43 | + const hasLower = document.getElementById("lowercase").checked; |
| 44 | + const hasNumber = document.getElementById("numbers").checked; |
| 45 | + const hasSymbol = document.getElementById("symbols").checked; |
| 46 | + const result = document.getElementById("PasswordResult"); |
| 47 | + result.innerText = generatePassword( |
| 48 | + hasLower, |
| 49 | + hasUpper, |
| 50 | + hasNumber, |
| 51 | + hasSymbol, |
| 52 | + length |
| 53 | + ); |
| 54 | +}); |
| 55 | +
|
| 56 | +function generatePassword(lower, upper, number, symbol, length){ |
| 57 | + let generatedPassword = ""; |
| 58 | + const typesCount = lower + upper + number + symbol; |
| 59 | + const typesArr = [{lower}, {upper}, {number}, {symbol}].filter( |
| 60 | + (item) => Object.values(item)[0] |
| 61 | + ); |
| 62 | + for (let i = 0; i < length; i += typesCount){ |
| 63 | + typesArr.forEach((type) => { |
| 64 | + const funcName = Object.keys(type)[0]; |
| 65 | + generatedPassword += randomFunc[funcName](); |
| 66 | + }); |
| 67 | + } |
| 68 | + const finalPassword = generatedPassword.slice(0, length); |
| 69 | + return finalPassword; |
| 70 | +} |
| 71 | +``` |
| 72 | +And the last ting is the code for the "copy to clipboard" button in order to copy the generated password. |
| 73 | + |
| 74 | +```java-script |
| 75 | +let button = document.getElementById("clipboardBtn"); |
| 76 | +button.addEventListener("click", (e) => { |
| 77 | + e.preventDefault(); |
| 78 | + document.execCommand( |
| 79 | + "copy", |
| 80 | + false, |
| 81 | + document.getElementById("PasswordResult").select() |
| 82 | + ); |
| 83 | +}); |
| 84 | +``` |
| 85 | +Note: This is optional, you can not add it, it's up to how useful this code can be in your projects. |
| 86 | + |
| 87 | +Credits |
| 88 | +------- |
| 89 | +- [Linkedin Account](https://www.somar-kesen.com/) </br> |
| 90 | +- [My website](https://www.somar-kesen.com/) |
0 commit comments