├── .vscode └── settings.json ├── assets ├── copy.svg └── favicon.ico ├── index.html ├── script.js └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /assets/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kishangupta99/Passsword-Generator/bf27643dbab34b79c1591ea64736955561d7df8d/assets/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 |

19 | 20 |

Password Generator

21 | 22 |

23 | 24 | 25 | 26 | 30 | 31 |

32 | 33 | 34 |

35 | 36 | 37 |

38 |

Password Length

39 |

40 |

41 | 42 | 43 | 44 | 45 | 46 |

47 | 48 | Includes Uppercase letters 49 |

50 | 51 |

52 | 53 | Includes Lowercase letters 54 |

55 | 56 |

57 | 58 | Includes Numbers 59 |

60 | 61 |

62 | 63 | Includes Symbols 64 |

65 | 66 | 67 |

68 |

Strength

69 |

70 |

71 | 72 | 73 | 74 | 75 |

76 | 77 |

78 | 79 | 80 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const inputSlider = document.querySelector("[data-lengthSlider]"); 2 | const lengthDisplay = document.querySelector("[data-lengthNumber]"); 3 | 4 | const passwordDisplay = document.querySelector("[data-passwordDisplay]"); 5 | const copyBtn = document.querySelector("[data-copy]"); 6 | const copyMsg = document.querySelector("[data-copyMsg]"); 7 | const uppercaseCheck = document.querySelector("#uppercase"); 8 | const lowercaseCheck = document.querySelector("#lowercase"); 9 | const numbersCheck = document.querySelector("#numbers"); 10 | const symbolsCheck = document.querySelector("#symbols"); 11 | const indicator = document.querySelector("[data-indicator]"); 12 | const generateBtn = document.querySelector(".generateButton"); 13 | const allCheckBox = document.querySelectorAll("input[type=checkbox]"); 14 | const symbols = '~`!@#$%^&*()_-+={[}]|:;"<,>.?/'; 15 | 16 | 17 | //initially 18 | let password = ""; 19 | let passwordLength = 10; 20 | let checkCount = 0; 21 | handleSlider(); 22 | //ste strength circle color to grey 23 | setIndicator("#ccc"); 24 | 25 | 26 | //set passwordLength 27 | function handleSlider() { 28 | inputSlider.value = passwordLength; 29 | lengthDisplay.innerText = passwordLength; 30 | //or kuch bhi karna chahiye ? - HW 31 | const min = inputSlider.min; 32 | const max = inputSlider.max; 33 | inputSlider.style.backgroundSize = ( (passwordLength - min)*100/(max - min)) + "% 100%" 34 | } 35 | 36 | function setIndicator(color) { 37 | indicator.style.backgroundColor = color; 38 | indicator.style.boxShadow = `0px 0px 12px 1px ${color}`; 39 | } 40 | 41 | function getRndInteger(min, max) { 42 | return Math.floor(Math.random() * (max - min)) + min; 43 | } 44 | 45 | function generateRandomNumber() { 46 | return getRndInteger(0,9); 47 | } 48 | 49 | function generateLowerCase() { 50 | return String.fromCharCode(getRndInteger(97,123)) 51 | } 52 | 53 | function generateUpperCase() { 54 | return String.fromCharCode(getRndInteger(65,91)) 55 | } 56 | 57 | function generateSymbol() { 58 | const randNum = getRndInteger(0, symbols.length); 59 | return symbols.charAt(randNum); 60 | } 61 | 62 | function calcStrength() { 63 | let hasUpper = false; 64 | let hasLower = false; 65 | let hasNum = false; 66 | let hasSym = false; 67 | if (uppercaseCheck.checked) hasUpper = true; 68 | if (lowercaseCheck.checked) hasLower = true; 69 | if (numbersCheck.checked) hasNum = true; 70 | if (symbolsCheck.checked) hasSym = true; 71 | 72 | if (hasUpper && hasLower && (hasNum || hasSym) && passwordLength >= 8) { 73 | setIndicator("#0f0"); 74 | } else if ( 75 | (hasLower || hasUpper) && 76 | (hasNum || hasSym) && 77 | passwordLength >= 6 78 | ) { 79 | setIndicator("#ff0"); 80 | } else { 81 | setIndicator("#f00"); 82 | } 83 | } 84 | 85 | async function copyContent() { 86 | try { 87 | await navigator.clipboard.writeText(passwordDisplay.value); 88 | copyMsg.innerText = "copied"; 89 | } 90 | catch(e) { 91 | copyMsg.innerText = "Failed"; 92 | } 93 | //to make copy wala span visible 94 | copyMsg.classList.add("active"); 95 | 96 | setTimeout( () => { 97 | copyMsg.classList.remove("active"); 98 | },2000); 99 | 100 | } 101 | 102 | function shufflePassword(array) { 103 | //Fisher Yates Method 104 | for (let i = array.length - 1; i > 0; i--) { 105 | //random J, find out using random function 106 | const j = Math.floor(Math.random() * (i + 1)); 107 | //swap number at i index and j index 108 | const temp = array[i]; 109 | array[i] = array[j]; 110 | array[j] = temp; 111 | } 112 | let str = ""; 113 | array.forEach((el) => (str += el)); 114 | return str; 115 | } 116 | 117 | function handleCheckBoxChange() { 118 | checkCount = 0; 119 | allCheckBox.forEach( (checkbox) => { 120 | if(checkbox.checked) 121 | checkCount++; 122 | }); 123 | 124 | //special condition 125 | if(passwordLength < checkCount ) { 126 | passwordLength = checkCount; 127 | handleSlider(); 128 | } 129 | } 130 | 131 | allCheckBox.forEach( (checkbox) => { 132 | checkbox.addEventListener('change', handleCheckBoxChange); 133 | }) 134 | 135 | 136 | inputSlider.addEventListener('input', (e) => { 137 | passwordLength = e.target.value; 138 | handleSlider(); 139 | }) 140 | 141 | 142 | copyBtn.addEventListener('click', () => { 143 | if(passwordDisplay.value) 144 | copyContent(); 145 | }) 146 | 147 | generateBtn.addEventListener('click', () => { 148 | //none of the checkbox are selected 149 | 150 | if(checkCount == 0) 151 | return; 152 | 153 | if(passwordLength < checkCount) { 154 | passwordLength = checkCount; 155 | handleSlider(); 156 | } 157 | 158 | // let's start the jouney to find new password 159 | console.log("Starting the Journey"); 160 | //remove old password 161 | password = ""; 162 | 163 | //let's put the stuff mentioned by checkboxes 164 | 165 | // if(uppercaseCheck.checked) { 166 | // password += generateUpperCase(); 167 | // } 168 | 169 | // if(lowercaseCheck.checked) { 170 | // password += generateLowerCase(); 171 | // } 172 | 173 | // if(numbersCheck.checked) { 174 | // password += generateRandomNumber(); 175 | // } 176 | 177 | // if(symbolsCheck.checked) { 178 | // password += generateSymbol(); 179 | // } 180 | 181 | let funcArr = []; 182 | 183 | if(uppercaseCheck.checked) 184 | funcArr.push(generateUpperCase); 185 | 186 | if(lowercaseCheck.checked) 187 | funcArr.push(generateLowerCase); 188 | 189 | if(numbersCheck.checked) 190 | funcArr.push(generateRandomNumber); 191 | 192 | if(symbolsCheck.checked) 193 | funcArr.push(generateSymbol); 194 | 195 | //compulsory addition 196 | for(let i=0; i Explore below code */ 264 | /* .slider::-moz-range-thumb { 265 | position: relative; 266 | z-index: 1; 267 | appearance: none; 268 | height: 2rem; 269 | width: 2rem; 270 | border-radius: 50%; 271 | background: var(--vb-yellow); 272 | box-shadow: 0px 0px 20px 0px rgba(255, 229, 61, 0.50); 273 | cursor: pointer; 274 | } 275 | 276 | .slider::-moz-range-thumb:hover { 277 | outline: 2px solid var(--vb-yellow); 278 | background-color: var(--dk-violet); 279 | box-shadow: 0px 0px 25px 5px rgba(255, 229, 61, 0.80); 280 | } */ --------------------------------------------------------------------------------