├── README.md ├── index.html ├── style.css └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # Strong-Password-Generator 2 | Generate Strong Password With This Tool & Enhance Your Security... 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Password Generator 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Password Generator

17 |
18 |
19 | 20 |
Copy
21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 | 43 | 44 | 45 |
46 |
47 |
48 |
49 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: sans-serif; 4 | background: rgba(0, 0, 0, 0.8); 5 | } 6 | 7 | main { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | } 13 | 14 | .box { 15 | box-shadow: 1px 2px 4px #9e9e9e; 16 | padding: 1rem; 17 | width: 350px; 18 | background: #e6dbf7; 19 | border-radius: 3px; 20 | } 21 | 22 | form { 23 | margin-bottom: 0; 24 | } 25 | 26 | .title { 27 | text-align: center; 28 | font-size: 30px; 29 | background: -webkit-linear-gradient(rgb(190, 11, 11), rgb(20, 212, 196)); 30 | -webkit-background-clip: text; 31 | -webkit-text-fill-color: transparent; 32 | } 33 | 34 | .result-row { 35 | position: relative; 36 | } 37 | 38 | .result-copy { 39 | position: absolute; 40 | padding: 7px 10px; 41 | background: #000000; 42 | color: white; 43 | top: 9px; 44 | right: 3px; 45 | cursor: pointer; 46 | font-family: consolas; 47 | border-radius: 25px; 48 | } 49 | 50 | .result-copy:hover { 51 | background: #ffffff; 52 | color: rgba(0, 0, 0, 0.8) 53 | } 54 | 55 | .result-copy:active { 56 | box-shadow: 1px 2px 2px gray; 57 | } 58 | 59 | .form-row { 60 | display: flex; 61 | justify-content: space-between; 62 | margin: 10px 0; 63 | } 64 | 65 | .length-label { 66 | line-height: 2; 67 | } 68 | 69 | #length { 70 | width: 80px; 71 | text-align: left; 72 | outline: none; 73 | } 74 | 75 | #result { 76 | width: 331px; 77 | height: 42px; 78 | outline: none; 79 | padding-left: 1rem; 80 | font-size: 16px; 81 | } 82 | 83 | input { 84 | padding: 4px 8px; 85 | font-size: 15px; 86 | color: #555; 87 | background-color: #dedede; 88 | ; 89 | border: 1px solid #ccc; 90 | border-radius: 25px; 91 | } 92 | 93 | button { 94 | width: 100%; 95 | padding: 8px; 96 | font-size: 1.1rem; 97 | letter-spacing: 1px; 98 | background: linear-gradient(45deg, #fffb00, #e72e0d); 99 | border: none; 100 | color: rgb(14, 13, 13); 101 | border-radius: 25px; 102 | margin-top: 5px; 103 | outline: none; 104 | } 105 | 106 | button:hover { 107 | background: linear-gradient(220deg, #009688, #3F51B5); 108 | color: rgb(255, 255, 255) 109 | } 110 | 111 | button:active { 112 | box-shadow: 1px 2px 2px gray; 113 | } 114 | 115 | .message { 116 | color: #e63333; 117 | margin-top: 5px; 118 | position: relative; 119 | top: 5px; 120 | height: 16px; 121 | text-align: center; 122 | } 123 | 124 | .message-success { 125 | color: #900c0c; 126 | } 127 | 128 | /* 129 | FOOTER 130 | ---------------*/ 131 | footer { 132 | position: absolute; 133 | bottom: 0; 134 | text-align: center; 135 | left: 50%; 136 | transform: translateX(-50%); 137 | color: #808080; 138 | font-size: 0.95rem; 139 | } 140 | 141 | footer p { 142 | letter-spacing: 1px; 143 | } 144 | 145 | footer a { 146 | color: #0c8990; 147 | text-decoration: none; 148 | } 149 | 150 | footer a:hover { 151 | color: #3a56b1; 152 | } 153 | 154 | /* 155 | Mobile View 156 | -----------------*/ 157 | @media(max-width: 576px) { 158 | footer { 159 | font-size: 0.8rem; 160 | } 161 | 162 | .box { 163 | width: 320px; 164 | } 165 | 166 | #result { 167 | width: 303px; 168 | } 169 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const result = document.querySelector('#result'), 2 | copyBtn = document.querySelector('.result-copy'), 3 | length = document.querySelector('#length'), 4 | uppercase = document.querySelector('#uppercase'), 5 | lowercase = document.querySelector('#lowercase'), 6 | numbers = document.querySelector('#numbers'), 7 | symbols = document.querySelector('#symbols'), 8 | generate = document.querySelector('#generate'), 9 | message = document.querySelector('.message'); 10 | 11 | 12 | generate.addEventListener('click', function (e) { 13 | e.preventDefault(); 14 | let passwordLength = length.value; 15 | if (passwordLength > 4 && passwordLength <= 25) { 16 | let password = ''; 17 | for (let i = 0; i < passwordLength; i++) { 18 | password += generateRandomCharacter(); 19 | } 20 | result.value = password; 21 | message.textContent = ""; 22 | } 23 | else { 24 | message.textContent = "Select A Length Between 5 And 25"; 25 | if (message.classList.contains('message-success')) { 26 | message.classList.remove('message-success'); 27 | } 28 | result.value = ""; 29 | hideMessage(); 30 | } 31 | }); 32 | 33 | copyBtn.addEventListener('click', function () { 34 | const textarea = document.createElement('textarea'); 35 | const password = result.value; 36 | 37 | if (!password) { return; } 38 | 39 | textarea.value = password; 40 | document.body.appendChild(textarea); 41 | textarea.select(); 42 | document.execCommand('copy'); 43 | textarea.remove(); 44 | message.textContent = "Password Copied To Clipboard"; 45 | message.classList.add('message-success'); 46 | hideMessage(); 47 | }); 48 | 49 | 50 | function getRandomUppercase() { 51 | // (65 to 90) ascii values for (A to Z) 52 | return String.fromCharCode(Math.floor(Math.random() * 26) + 65); 53 | } 54 | 55 | function getRandomLowercase() { 56 | // (97 to 122) ascii values for (a to z) 57 | return String.fromCharCode(Math.floor(Math.random() * 26) + 97); 58 | } 59 | 60 | function getRandomNumber() { 61 | return Math.floor(Math.random() * 10).toString(); 62 | } 63 | 64 | function getRandomSymbol() { 65 | const str = "!@#$%^&*()_+<>{}?:"; 66 | return str[Math.floor(Math.random() * str.length)]; 67 | } 68 | 69 | 70 | // calling a random function from the above 4 functions 71 | function generateRandomCharacter() { 72 | if (uppercase.checked && lowercase.checked && numbers.checked && symbols.checked) { 73 | const functions = { 74 | 0: getRandomUppercase, 75 | 1: getRandomLowercase, 76 | 2: getRandomNumber, 77 | 3: getRandomSymbol 78 | } 79 | return functions[Math.floor(Math.random() * 4)](); 80 | } 81 | if (uppercase.checked && lowercase.checked && numbers.checked && !symbols.checked) { 82 | const functions = { 83 | 0: getRandomUppercase, 84 | 1: getRandomLowercase, 85 | 2: getRandomNumber 86 | } 87 | return functions[Math.floor(Math.random() * 3)](); 88 | } 89 | if (uppercase.checked && lowercase.checked && !numbers.checked && symbols.checked) { 90 | const functions = { 91 | 0: getRandomUppercase, 92 | 1: getRandomLowercase, 93 | 2: getRandomSymbol 94 | } 95 | return functions[Math.floor(Math.random() * 3)](); 96 | } 97 | if (uppercase.checked && lowercase.checked && !numbers.checked && !symbols.checked) { 98 | const functions = { 99 | 0: getRandomUppercase, 100 | 1: getRandomLowercase 101 | } 102 | return functions[Math.floor(Math.random() * 2)](); 103 | } 104 | } 105 | 106 | function hideMessage() { 107 | setTimeout(function () { 108 | message.textContent = ""; 109 | }, 3000) 110 | } --------------------------------------------------------------------------------