-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
268 lines (232 loc) · 7.47 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
const inputslider = document.querySelector("[data-lengthSlider]");
const lengthDisplay = document.querySelector("[data-lengthNumber]");
const paswwordDisplay = document.querySelector("[data-passwordDisplay]");
const copyBtn = document.querySelector("[data-copy]");
const copyMsg = document.querySelector("[data-copyMsg]");
const upperCaseCheck = document.querySelector("#uppercase");
const lowerCaseCheck = document.querySelector("#lowercase");
const numberCheck = document.querySelector("#numbers");
const symbolCheck = document.querySelector("#symbols");
const indicator = document.querySelector("[dataindicator]");
const generateBtn = document.querySelector(".generateButton");
const allCheckBox = document.querySelectorAll("input[type=checkbox]");
const symbols = '~`!@#$%^&*()_-+={[}]|:;"<,>.?/';
//starting ma password kya hai
//starting ma password length 10 man rha hu
//starting ma uppercase checkboc ko tick krkr de rha hai
//strting ma indicator grey
let password = "";
let passwordLength = 10;
let checkCountor = 0;
handleslider();
//str strength color to grey
setindicator("#ccc");
//set passwordLength
//jo slider aaga picha kroge us mutabik password length set kr dega
//paswordlength ko ui pa reflect krata hai
function handleslider() {
inputslider.value = passwordLength;
//jo length hai woh starting ma 10 ho
lengthDisplay.innerText = passwordLength;
//or kuch bhi krna chaiya
const min = inputslider.min;
const max = inputslider.max;
inputslider.style.backgroundSize =
((passwordLength - min) * 100) / (max - min) + "%100%";
}
//color set
//shadow set
function setindicator(color) {
indicator.style.backgroundColor = color;
//shadow khud
indicator.style.boxShadow = `0px 0px 12px 1px ${color} `;
}
//min aur max ka bich ma ek random integer findout krkr deta hai
function getRandomInteger(min, max) {
//ab anser o to max -min ka bich ma aagya
return Math.floor(Math.random() * (max - min)) + min;
}
function generateRandomInteger() {
return getRandomInteger(0, 9);
}
function generateLowerCase() {
//a assci value 97 and z have ascii value 123
return String.fromCharCode(getRandomInteger(97, 123));
}
function generateUpperCase() {
//A assci value 65 and z have ascii value 91
return String.fromCharCode(getRandomInteger(65, 91));
}
//symbol ki string sa randomly index pkdkr uss index pa jo symbol pda hai woh deta hai
function generateSymbols() {
//string len find in order to find max
const randNum = getRandomInteger(0, symbols.length);
return symbols[randNum];
}
//to calulate stength of password on basis of some rules
//kon konsa checkbox checked hai kon sa nhi hai
//indicator ma color set krdeta hai
function calculateStrength() {
let hasupper = false;
let haslower = false;
let hasNum = false;
let hasSymbol = false;
if (upperCaseCheck.checked) {
hasupper = true;
}
if (lowerCaseCheck.checked) {
haslower = true;
}
if (numberCheck.checked) {
hasNum = true;
}
if (symbolCheck.checked) {
hasSymbol = true;
}
if (hasupper && haslower && (hasNum || hasSymbol) && passwordLength >= 8) {
setindicator("#0f0");
} else if (
(haslower || hasupper) &&
(hasNum || hasSymbol) &&
passwordLength >= 6
) {
setindicator("#ff0");
} else {
setindicator("#f00");
}
}
//clipboard api
//async function
//jo bhi content password display ki field ka andar ussa clipboard pa copy krta hai
//write text method jo promise return krta haiclipboard
async function copyContent() {
//promise resolve or reject dono ho skta hai so we give in try and catch block
//copy msg invisible ho gya kuch time ka bad
try {
await navigator.clipboard.writeText(paswwordDisplay.value);
copyMsg.innerText = "Copied";
} catch (error) {
copyMsg.innerText = "Failed";
}
//to make copy wala span visible
copyMsg.classList.add("active");
//copy wala text ko gyab krne ka liye
setTimeout(() => {
copyMsg.classList.remove("active");
}, 2000);
}
//to add event listener
//slider ko jb bhi aag picha kr raha hun to slider ki avlue change ho rhi yeh woh value lakar de rha hai
inputslider.addEventListener("input", (e) => {
//pasword length ko updat kr diya
passwordLength = e.target.value;
handleslider();
});
//copy btn add event listener
//input value koi value hogi tb copy kr payoge
copyBtn.addEventListener("click", () => {
if (paswwordDisplay.value) {
copyContent();
}
});
function handleCheckBoxChange() {
checkCountor = 0;
allCheckBox.forEach((checkbox) => {
if (checkbox.checked) {
checkCountor++;
}
});
//special condition of password length< no of checkbocx count
if (passwordLength < checkCountor) {
passwordLength = checkCountor;
handleslider();
}
}
//saara checkbocx pa even listener lga denga
//chahe tick ho ho rha ya untick usma check krkr aao kitna checkbox cheked hai
allCheckBox.forEach((checkbox) => {
checkbox.addEventListener("change", handleCheckBoxChange);
});
//to genrate a shuffle paswword
function shufflePassword(array) {
//Fisher Yates Method
for (let i = array.length - 1; i > 0; i--) {
//random J, find out using random function
const j = Math.floor(Math.random() * (i + 1));
//swap number at i index and j index
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
let str = "";
array.forEach((el) => (str += el));
return str;
}
//generate password
//jb mai sare boxes ko unchecked kr deta hu then click krta hu genertae password
//then generate password nhi hota
generateBtn.addEventListener("click", () => {
//koi bhi checkbox ticked nhi hai to hum password generate nhi kr sakta
if (checkCountor == 0) {
return;
}
if (passwordLength < checkCountor) {
passwordLength = checkCountor;
handleslider();
}
// console.log("stating the journey");
//lets start to journey to find new password
//remove old password
password = "";
//check kru ki password ma kon si chiza dalni hai means konsa checkbox checked hai
//lets put the stuff mentioned by checkbox
// if (upperCaseCheck.checked) {
// password += generateUpperCase();
// }
// if (lowerCaseCheck.checked) {
// password += generateLowerCase();
// }
// if (numberCheck.checked) {
// password += generateRandomInteger();
// }
// if (symbolCheck.checked) {
// password += generateSymbols();
// }
//suppose 10 paswwword length this 4 chize upar wali daldi
// aur no randomly dal dun
//lekin yeh kaisa findout karu ki no dalu , symbol , ya letter
let funcArr = [];
if (upperCaseCheck.checked) {
funcArr.push(generateUpperCase);
}
if (lowerCaseCheck.checked) {
funcArr.push(generateLowerCase);
}
if (numberCheck.checked) {
funcArr.push(generateRandomInteger);
}
if (symbolCheck.checked) {
funcArr.push(generateSymbols);
}
//is function ma sari chiz daldi jo bhi chceked hai
//compulsory addition
//jo tick kiya hu
for (let i = 0; i < funcArr.length; i++) {
password += funcArr[i]();
}
// console.log("Compulsory addition done");
//remaining addition
for (let i = 0; i < passwordLength - funcArr.length; i++) {
let randIndex = getRandomInteger(0, funcArr.length);
password += funcArr[randIndex]();
}
// console.log("Remaining addition Done");
//shuffle krna padega
//pasword ko array ka frm ma bhje diya
password = shufflePassword(Array.from(password));
// console.log("Shuffling done");
paswwordDisplay.value = password;
// console.log("Ui addition done");
//paswword bn ka bad strength bhi call krni padegi
calculateStrength();
});