├── README.md ├── images ├── copy.png └── —Pngtree—color neon dialog box_4044237.png ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Random-Password-Generator 2 | Random Password Generator using HTML - CSS & JS. 3 | -------------------------------------------------------------------------------- /images/copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DynamicxProject/Random-Password-Generator/cac8d7049f7a7c2e8830e2082a9cff72cc7167b6/images/copy.png -------------------------------------------------------------------------------- /images/—Pngtree—color neon dialog box_4044237.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DynamicxProject/Random-Password-Generator/cac8d7049f7a7c2e8830e2082a9cff72cc7167b6/images/—Pngtree—color neon dialog box_4044237.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CODE AASHU | Random Password Generator 9 | 10 | 11 |
12 |
13 |

Generate a
Random Password

14 |
15 |
16 | message-box 17 |

copied

18 |
19 |
20 | 21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | const passwordInput = document.getElementById('password-input'); 3 | const button = document.querySelector('.btn'); 4 | const copyButton = document.querySelector('.copy-btn'); 5 | const messageBox = document.getElementById('message-box'); 6 | 7 | const length = 8; 8 | 9 | const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" 10 | const lowerCase = upperCase.toLowerCase(); 11 | const numbers = "0123456789"; 12 | const symbol = "@#*"; 13 | 14 | const allChar = upperCase + lowerCase +numbers +symbol; 15 | 16 | function createPassword(){ 17 | let password = " "; 18 | 19 | password += upperCase[Math.floor(Math.random()*upperCase.length)]; 20 | password += lowerCase[Math.floor(Math.random()*lowerCase.length)]; 21 | password += numbers[Math.floor(Math.random()*numbers.length)]; 22 | password += symbol[Math.floor(Math.random()*symbol.length)]; 23 | 24 | while(length>password.length){ 25 | password += allChar[Math.floor(Math.random()*allChar.length)]; 26 | } 27 | passwordInput.value= password; 28 | } 29 | 30 | button.addEventListener('click', ()=>{ 31 | createPassword(); 32 | messageBox.style.scale = '0'; 33 | 34 | }) 35 | 36 | function copyText(){ 37 | passwordInput.select(); 38 | document.execCommand("copy"); 39 | }; 40 | 41 | copyButton.addEventListener('click', ()=>{ 42 | copyText(); 43 | messageBox.style.scale = '1'; 44 | 45 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | font-family: Arial, Helvetica, sans-serif; 6 | box-sizing: border-box; 7 | } 8 | 9 | body{ 10 | background-color: #191f22; 11 | } 12 | 13 | .container{ 14 | width: 90%; 15 | max-width: 450px; 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%,-50%); 20 | } 21 | 22 | .container .title { 23 | color: #fff; 24 | font-size: 1.3rem; 25 | word-spacing: 3px; 26 | } 27 | 28 | .container .title span{ 29 | color: #019f55; 30 | display: flex; 31 | margin-right: 6rem; 32 | margin-top: 10px; 33 | font-size: 2.3rem; 34 | line-height: 5vh; 35 | border-bottom: 4px solid #019f55; 36 | } 37 | 38 | .container .password-panel{ 39 | width: 90%; 40 | height: 6vh; 41 | 42 | border-radius: 10px; 43 | background-color: #fff; 44 | border: 1px solid #fff; 45 | margin:5% 10% 5% 0; 46 | } 47 | 48 | .container .password-panel input{ 49 | width:85%; 50 | height: 6vh; 51 | background-color: transparent ; 52 | border: none; 53 | outline: none; 54 | padding: 5px ; 55 | font-size: 1.5rem; 56 | } 57 | 58 | .container .password-panel button{ 59 | width: 15%; 60 | border: none; 61 | margin-top: 2px; 62 | position: absolute; 63 | background-color: transparent; 64 | } 65 | 66 | .container .password-panel button img{ 67 | width: 30px; 68 | height: 40px; 69 | } 70 | 71 | .container .password-panel button img:active{ 72 | scale: 0.9; 73 | } 74 | 75 | 76 | .container #message-box{ 77 | scale: 0; 78 | } 79 | 80 | 81 | .container #message-box img{ 82 | display: flex; 83 | float: right; 84 | position: absolute; 85 | right: 0; 86 | margin-top: -35px; 87 | margin-right: 60%; 88 | transform: rotate(-5deg); 89 | width: 100px; 90 | height: 70px; 91 | filter:drop-shadow( 5px 5px 100px #000, -5px -5px 100px #000); 92 | } 93 | 94 | .container #message-box p{ 95 | position: absolute; 96 | margin-right: 65%; 97 | right: 0; 98 | margin-top: -10px; 99 | display: flex; 100 | color: #fff; 101 | } 102 | 103 | .container .btn{ 104 | width: 50%; 105 | height: 5vh; 106 | } 107 | 108 | .container .btn button{ 109 | width: 100%; 110 | height: 100%; 111 | color: white; 112 | background-color: #019f55; 113 | border: none; 114 | border-radius: 5px; 115 | font-size: 1rem; 116 | 117 | } 118 | 119 | @media (max-width :460px) { 120 | .container .btn button{ 121 | font-size: 0.9rem; 122 | margin-right: -20px; 123 | } 124 | 125 | .container .btn button i{ 126 | font-size: 1rem; 127 | left: 0; 128 | margin-right: 1px; 129 | } 130 | 131 | } 132 | 133 | .container .btn button:active{ 134 | scale: 0.98; 135 | } 136 | 137 | 138 | .container .btn button i{ 139 | position: absolute; 140 | left: 5px; 141 | font-size: 1.5rem; 142 | margin:-3px 0 0 0 ; 143 | } 144 | --------------------------------------------------------------------------------