Skip to content

Commit f2353ec

Browse files
Chayandas07Chayandas07
authored
Merge pull request #49 from shresritik/new-user
added password generator
2 parents b500550 + e52dfdf commit f2353ec

File tree

2 files changed

+279
-0
lines changed

2 files changed

+279
-0
lines changed

‎Password Generator/password.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdn.tailwindcss.com"></script>
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
9+
rel="stylesheet"
10+
/>
11+
<title>Password Generator</title>
12+
<style>
13+
.gradient-bg-services {
14+
background-color: #0f0e13;
15+
background-image: radial-gradient(
16+
at 0% 0%,
17+
hsla(253, 16%, 7%, 1) 0,
18+
transparent 50%
19+
),
20+
radial-gradient(
21+
at 50% 100%,
22+
hsla(225, 39%, 25%, 1) 0,
23+
transparent 50%
24+
);
25+
}
26+
27+
.gradient-bg-footer {
28+
background-color: #0f0e13;
29+
background-image: radial-gradient(
30+
at 0% 100%,
31+
hsla(253, 16%, 7%, 1) 0,
32+
transparent 53%
33+
),
34+
radial-gradient(
35+
at 50% 150%,
36+
hsla(339, 49%, 30%, 1) 0,
37+
transparent 50%
38+
);
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div
44+
class="wrapper w-full min-h-screen gradient-bg-services text-white grid place-content-center"
45+
>
46+
<div
47+
class="rounded min-w-[60vw] md: w-[35vw] main flex flex-col items-center gap-5 bg-[rgba(256,256,256,0.1)] p-5 border-[rgba(255,255,255,0.7)] shadow-[-17px_17px_17px_rgba(10,10,10,0.25)] backdrop-blur"
48+
>
49+
<h1
50+
class="w-full gradient-bg-footer font-bold text-center py-3 rounded border-b-2 border-b-gray-100"
51+
>
52+
Password Generator
53+
</h1>
54+
55+
<div class="flex justify-between w-[95%]">
56+
<input
57+
readonly
58+
placeholder="Password"
59+
password-display
60+
class="p-2 rounded text-white font-bold bg-blue-950 border-solid border-2 border-cyan-400"
61+
/>
62+
<button class="relative">
63+
<span
64+
datacopy-msg
65+
class="hidden absolute top-[-15px] right-[-15px] bg-gray-700 px-2 rounded-lg"
66+
></span>
67+
<i class="ri-file-copy-line text-2xl text-blue-400" copy-button></i>
68+
</button>
69+
</div>
70+
71+
<div class="utility flex flex-col w-[95%] justify-between gap-2">
72+
<div class="length flex w-full justify-between items-center">
73+
<p>Password Length</p>
74+
<span pass-len>0</span>
75+
</div>
76+
<input
77+
type="range"
78+
name=""
79+
id=""
80+
min="1"
81+
max="20"
82+
step="1"
83+
slider
84+
class=""
85+
/>
86+
<div class="checkbox">
87+
<div>
88+
<input type="checkbox" name="" id="uppercase" />
89+
<label for="uppercase">Include UpperCase</label>
90+
</div>
91+
<div>
92+
<input type="checkbox" name="" id="lowercase" />
93+
<label for="lowercase">Include LowerCase</label>
94+
</div>
95+
<div>
96+
<input type="checkbox" name="" id="number" />
97+
<label for="number">Include Numbers</label>
98+
</div>
99+
<div>
100+
<input type="checkbox" name="" id="symbol" />
101+
<label for="symbol">Include Symbols</label>
102+
</div>
103+
</div>
104+
<div class="strength flex w-full justify-between items-center">
105+
<p>Strength</p>
106+
<div
107+
strength-indicator
108+
class="w-[15px] h-[15px] rounded-full"
109+
></div>
110+
</div>
111+
</div>
112+
113+
<button
114+
class="w-full gradient-bg-footer text-center py-3 rounded border-b-2 border-b-gray-100 shadow-[-17px_17px_17px_rgba(10,10,10,0.25)]"
115+
id="generate"
116+
>
117+
Generate Password
118+
</button>
119+
</div>
120+
</div>
121+
<script src="./password.js"></script>
122+
</body>
123+
</html>

‎Password Generator/password.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
// Variables to access HTML
2+
let content = document.querySelector("[password-display]");
3+
const copyMsg = document.querySelector("[datacopy-msg]");
4+
const copyButton = document.querySelector("[copy-button]");
5+
6+
let passwordNo = document.querySelector("[pass-len]");
7+
let slideTag = document.querySelector("[slider]");
8+
9+
let uppercase = document.querySelector("#uppercase");
10+
let lowerCase = document.querySelector("#lowercase");
11+
let numberInput = document.querySelector("#number");
12+
let symbol = document.querySelector("#symbol");
13+
14+
let indicator = document.querySelector("[strength-indicator]");
15+
16+
const generate = document.querySelector("#generate");
17+
18+
19+
20+
21+
let passWord = "";
22+
let passWordLen = 10; // Default
23+
let color = '#b4b4b4';
24+
25+
handleSlider(); // Call for first time after reload page
26+
function handleSlider(){
27+
slideTag.value = passWordLen;
28+
passwordNo.textContent = passWordLen;
29+
}
30+
31+
slideTag.addEventListener('input', (event)=>{
32+
passWordLen = event.target.value;
33+
handleSlider();
34+
})
35+
36+
indicatorfun(color); //call
37+
indicatorfun(color);
38+
function indicatorfun(color){
39+
indicator.style.backgroundColor = color;
40+
indicator.style.boxShadow = "100px 200px 2px color";
41+
42+
}
43+
44+
// Universal formula to get any random no. [min, max}
45+
function getRandomInt(min, max){
46+
return Math.floor( Math.random()*(max-min) ) + min ;
47+
}
48+
49+
function getRandomNumber(){
50+
return getRandomInt(0, 9);
51+
}
52+
53+
function getRandomLowerCase(){
54+
return String.fromCharCode(getRandomInt(97, 123));
55+
}
56+
57+
function getRandomUpperCase(){
58+
return String.fromCharCode(getRandomInt(65, 91));
59+
}
60+
61+
const symbolArr = "\|<`(>,.?{~!@#[+-=^&*)/$%_}]";
62+
function getRandomSymbol(){
63+
return symbolArr.charAt((getRandomInt(0, symbolArr.length)));
64+
}
65+
66+
// Calculation of strength of a password and calls for indicator
67+
function calcStrength(){
68+
let upperVar = uppercase.checked;
69+
let lowerVar = lowerCase.checked;
70+
let numberVar = number.checked;
71+
let symbolVar = symbol.checked;
72+
73+
// Own Logic
74+
if(upperVar && lowerVar && numberVar && symbolVar){
75+
indicatorfun('#3cb371');
76+
}else if((upperVar && lowerVar && numberVar) || (upperVar && lowerVar && symbolVar) || (upperVar && numberVar && symbolVar)){
77+
indicatorfun('#3cb371')
78+
}else if((upperVar && lowerVar && !numberVar && !symbolVar) || (upperVar && !lowerVar && !numberVar && symbolVar) || (!upperVar && !lowerVar && numberVar && symbolVar) || (!upperVar && lowerVar && numberVar && !symbolVar)){
79+
indicatorfun('#ffa500');
80+
}else{
81+
indicatorfun('#ff0000');
82+
}
83+
}
84+
85+
86+
// Clipboard API fetched function. [WriteText]
87+
async function copyToClipboard(){
88+
try{
89+
await navigator.clipboard.writeText(content.textContent);
90+
copyMsg.textContent = "Copied";
91+
}
92+
catch(e){
93+
copyMsg.textContent = "Failed to copy";
94+
}
95+
copyMsg.classList.remove("hidden");
96+
// For disappering
97+
setTimeout(()=>{
98+
copyMsg.classList.add("hidden");
99+
}, 2000);
100+
}
101+
102+
copyButton.addEventListener('click', (event) =>{
103+
if(content.value) copyToClipboard(); // only is password is generated
104+
});
105+
106+
107+
// For final output + suffle array - [Protection algo]
108+
// function suffleArr(array){
109+
// let pass = "";
110+
// for(let i = array.length-1; i>0; i--){
111+
// let randomInd = getRandomInt(0,array.length);
112+
// let temp = array[randomInd];
113+
// array[randomInd] = array[i];
114+
// array[i] = temp;
115+
// pass = array[i] + pass ;
116+
// }
117+
// return pass;
118+
// }
119+
120+
121+
// Actual Brain
122+
function generatePassword(){
123+
let arr = [];
124+
passWord = "";
125+
if(uppercase.checked){
126+
passWord+= getRandomUpperCase();
127+
arr.push(getRandomUpperCase);
128+
}
129+
if(lowerCase.checked){
130+
passWord+= getRandomLowerCase();
131+
arr.push(getRandomLowerCase);
132+
}
133+
if(numberInput.checked){
134+
passWord+= getRandomNumber();
135+
arr.push(getRandomNumber);
136+
}
137+
if(symbol.checked){
138+
passWord+= getRandomSymbol();
139+
arr.push(getRandomSymbol);
140+
}
141+
// If any check box is not checked.
142+
if(passWord.length<=0) {
143+
content.placeholder = "Choose atleast one box";
144+
return ;
145+
}
146+
147+
for(let i=passWord.length; i<passWordLen; i++){
148+
let fun = arr[getRandomInt(0, arr.length)]();
149+
passWord+= fun;
150+
}
151+
//passWord = suffleArr(Array.from(passWord));
152+
content.value = passWord;
153+
calcStrength();
154+
}
155+
156+
generate.addEventListener('click', generatePassword);

0 commit comments

Comments
 (0)