Skip to content

Commit 2c5f821

Browse files
Merge pull request #1048 from meaviral17/main
Password Generator project code [issue #1002 solved]
2 parents 3849924 + 4b30eae commit 2c5f821

4 files changed

Lines changed: 334 additions & 177 deletions

File tree

Projects/Password Generator/Readme.md

Lines changed: 0 additions & 29 deletions
This file was deleted.

Projects/Password Generator/index.html

Lines changed: 140 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,156 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Password Generator</title>
9-
<link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/128/159/159478.png">
8+
<title>Neumorphism Password generator</title>
109
<link rel="stylesheet" href="style.css">
10+
<style>
11+
/* dark mode toggle & github buttons */
12+
nav {
13+
display: flex;
14+
justify-content: flex-end;
15+
padding: 20px 24px;
16+
}
17+
18+
.navbtn {
19+
position: absolute;
20+
left: 2rem;
21+
margin-top: 0.3rem;
22+
}
23+
24+
.theme-switch-wrapper {
25+
display: flex;
26+
align-items: center;
27+
}
28+
29+
.theme-switch-wrapper em {
30+
margin-left: 10px;
31+
font-size: 1rem;
32+
}
33+
34+
.theme-switch {
35+
display: inline-block;
36+
height: 34px;
37+
position: relative;
38+
width: 60px;
39+
}
40+
41+
.theme-switch input {
42+
display: none;
43+
}
44+
45+
.slider {
46+
background-color: var(--togglebg);
47+
bottom: 0;
48+
cursor: pointer;
49+
left: 0;
50+
position: absolute;
51+
right: 0;
52+
top: 0;
53+
transition: 0.4s;
54+
/* filter: var(--filter); */
55+
}
56+
57+
.slider:before {
58+
background-color: var(--roundcolor);
59+
bottom: 4px;
60+
content: "";
61+
height: 26px;
62+
left: 4px;
63+
position: absolute;
64+
transition: 0.4s;
65+
width: 26px;
66+
}
67+
68+
input:checked+.slider {
69+
background-color: var(--toggleslider);
70+
}
71+
72+
input:checked+.slider:before {
73+
transform: translateX(26px);
74+
}
75+
76+
.slider.round {
77+
border-radius: 34px;
78+
}
79+
80+
.slider.round:before {
81+
border-radius: 50%;
82+
}
83+
84+
em {
85+
color: var(--togglesliderColor);
86+
}
87+
</style>
1188
</head>
1289

1390
<body>
14-
15-
<h5 class="heading">Random Password Generator</h5>
16-
<h3> Password length : <input type = "number" id="length" placeholder=" Enter Password Length" style="height: 50px; width: 200px;"></h3>
17-
<br/><br/>
91+
1892
<div class="container">
19-
20-
<div class="input-box">
21-
<input type="text" name="" placeholder="Create Password" readonly=" " id="password">
93+
<h2>Password Generator</h2>
94+
<div class="result-container">
95+
<textarea id="PasswordResult"></textarea>
96+
</div>
97+
<div class="settings">
98+
<div class="setting">
99+
<label>Password length</label>
100+
<input type="number" id="Passwordlength" min="4" max="20" value="8" />
101+
</div>
102+
<div class="setting">
103+
<label>Include uppercase letters</label>
104+
<input type="checkbox" id="uppercase" checked />
105+
</div>
106+
<div class="setting">
107+
<label>Include lowercase letters</label>
108+
<input type="checkbox" id="lowercase" checked />
109+
</div>
110+
<div class="setting">
111+
<label>Include numbers</label>
112+
<input type="checkbox" id="numbers" checked />
113+
</div>
114+
<div class="setting">
115+
<label>Include symbols</label>
116+
<input type="checkbox" id="symbols" checked />
117+
</div>
118+
</div>
119+
<div class="buttons">
120+
<button class="btn btn-large" id="generateBtn">
121+
<i class="fas fa-key"></i> Generate
122+
</button>
123+
<button class="btn" id="clipboardBtn">
124+
<i class="far fa-clipboard"></i> Copy
125+
</button>
22126
</div>
23127
</div>
128+
<script src="script.js"></script>
129+
<script async defer src="https://buttons.github.io/buttons.js"></script>
130+
<script src="https://kit.fontawesome.com/dd8c49730d.js" crossorigin="anonymous"></script>
131+
<script>
132+
/* dark mode toggle */
133+
const toggleSwitch = document.querySelector(
134+
'.theme-switch input[type="checkbox"]'
135+
);
136+
const currentTheme = localStorage.getItem("theme");
24137

25-
<div id="button" onclick="getPassword();">Generate Password</div>
26-
<br/><br/>
27-
<center><button onclick="Copy()">Copy text</button></center>
138+
if (currentTheme) {
139+
document.documentElement.setAttribute("data-theme", currentTheme);
28140

29-
<script src="script.js"></script>
141+
if (currentTheme === "dark") {
142+
toggleSwitch.checked = true;
143+
}
144+
}
30145

146+
function switchTheme(e) {
147+
if (e.target.checked) {
148+
document.documentElement.setAttribute("data-theme", "dark");
149+
localStorage.setItem("theme", "dark");
150+
} else {
151+
document.documentElement.setAttribute("data-theme", "light");
152+
localStorage.setItem("theme", "light");
153+
}
154+
}
155+
156+
toggleSwitch.addEventListener("change", switchTheme, false);
157+
</script>
31158
</body>
32159

33160
</html>
34-
35-
<!-- TODO
36-
ADD A COPY TEXT BUTTON TO QUIKLY COPY TEXT -->
Lines changed: 83 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,87 @@
1-
var len = document.getElementById("length");
1+
// Functions for generating random number lowercase uppercase letters , symbols
22

3+
/* Math.random method genrate a random floating-point numbers
4+
Math.floor() function returns the largest integer less than or equal to a given number.
5+
For generating a random uppercase lowercase text random numbers symbols we use Charcode
6+
http://stevehardie.com/2009/09/character-code-list-char-code/ */
37

4-
//PASSWORD GENERATOR FUNCTION
5-
function getPassword() {
6-
const chars = '0123456789/%?@$#';
7-
var lengthOfPassword = len.value;
8-
flag=0;
9-
if(lengthOfPassword==''){
10-
window.alert('Please Enter the length');
11-
flag=1;
12-
}
13-
14-
if(lengthOfPassword<=4 && flag==0){
15-
window.alert('Password length cannot be less than 4 characters');
16-
}
17-
18-
19-
//console.log(lengthOfPassword);
20-
const clength = chars.length;
21-
let password = '';
22-
let p=0;
23-
console.log(randomWord(chars.length))
24-
while (p<lengthOfPassword) {
25-
password = password.concat(randomWord(chars.length));
26-
password = password.concat(chars[randomNumber(clength)]);
27-
p++;
28-
}
29-
password = password.substring(0, p);
30-
document.getElementById('password').value = password;
31-
32-
}
33-
34-
function randomNumber(e) {
35-
return Math.floor(Math.random() * e);
36-
}
37-
38-
function randomWord() {
39-
const number = randomNumber(words.length);
40-
return words[number];
41-
}
42-
//////////////////////////////////////
43-
44-
//COPY BUTTON SCRIPT
45-
function Copy() {
46-
// Get the text field
47-
var copyText = document.getElementById("password");
48-
49-
// Select the text field
50-
copyText.select();
51-
copyText.setSelectionRange(0, 99999); // For mobile devices
52-
53-
// Copy the text inside the text field
54-
navigator.clipboard.writeText(copyText.value);
8+
function getRandomLower() {
9+
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
10+
}
5511

56-
// Alert the copied text
57-
alert("Copied the text: " + copyText.value);
12+
function getRandomUpper() {
13+
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
5814
}
59-
60-
////////////////////////////////////////////////////////
61-
62-
63-
const words = ['BOB', 'BAM', 'BND', 'XOF', 'BIF',
64-
'KHR', 'XAF', 'CVE', 'XAF', 'CLP', 'COP', 'KMF',
65-
'CRC', 'CUP', 'CDF', 'DKK', 'DJF', 'XCD', 'DOP',
66-
'EGP', 'XAF', 'ERN', 'ETB', 'FJD', 'XAF', 'GEL',
67-
'mud', 'sky', 'grew', 'hard', 'ill', 'frame',
68-
'XCD', 'GNF', 'GTQ', 'XOF', 'GYD', 'HTG', 'HNL',
69-
'GNF', 'HNL', 'ISK', 'IRR', 'Japan', 'Australia', 'Afghanistan',
70-
'Albania', 'Algeria', 'Brunei', 'Barbados', 'Chile', 'Dominica', 'Zambia',
71-
'Aromatic', 'Hearty', 'Roux', 'Victuals', 'Chiffonade', 'Divine', 'Omakase',
72-
'Sapid', 'Earthy', 'Fresh', 'Smoky', 'Sweet', 'Sour', 'Airy',
73-
'Chewy', 'Creamy', 'Crumbly', 'Blackened', 'Broiled', 'Glazed', 'Sauteed',
74-
'Basement', 'Den', 'Hall', 'Porch', 'Yard', 'Counter', 'Mirror',
75-
'Sink', 'Armchair ', 'Rug', 'Glass', 'Napkin', 'Stove', 'Microwave',
76-
'Toaster', 'dig', 'new', 'rest', 'play', 'win', 'strong'];
15+
16+
function getRandomNumber() {
17+
return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
18+
}
19+
20+
function getRandomSymbol() {
21+
const symbols = "!@#$%^&*(){}[]=<>/,.";
22+
return symbols[Math.floor(Math.random() * symbols.length)];
23+
}
24+
25+
// adding a all functions into a object called randomFunc
26+
const randomFunc = {
27+
lower: getRandomLower,
28+
upper: getRandomUpper,
29+
number: getRandomNumber,
30+
symbol: getRandomSymbol,
31+
};
32+
33+
// adding a click event listner to generate button
34+
const generate = document.getElementById("generateBtn");
35+
generate.addEventListener("click", () => {
36+
const length = document.getElementById("Passwordlength").value;
37+
const hasUpper = document.getElementById("uppercase").checked;
38+
const hasLower = document.getElementById("lowercase").checked;
39+
const hasNumber = document.getElementById("numbers").checked;
40+
const hasSymbol = document.getElementById("symbols").checked;
41+
const result = document.getElementById("PasswordResult");
42+
result.innerText = generatePassword(
43+
hasLower,
44+
hasUpper,
45+
hasNumber,
46+
hasSymbol,
47+
length
48+
);
49+
// console.log(hasLower, hasUpper, hasNumber, hasSymbol);
50+
});
51+
52+
// function for generating random password
53+
function generatePassword(lower, upper, number, symbol, length) {
54+
let generatedPassword = "";
55+
const typesCount = lower + upper + number + symbol;
56+
// filter out unchecked types
57+
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(
58+
(item) => Object.values(item)[0]
59+
);
60+
// console.log(typesArr);
61+
62+
// creating a loop for calling generator function for each type
63+
for (let i = 0; i < length; i += typesCount) {
64+
typesArr.forEach((type) => {
65+
const funcName = Object.keys(type)[0];
66+
generatedPassword += randomFunc[funcName]();
67+
});
68+
}
69+
70+
// slicing password from 0 to length
71+
const finalPassword = generatedPassword.slice(0, length);
72+
return finalPassword;
73+
}
74+
75+
// copy to clipboard
76+
let button = document.getElementById("clipboardBtn");
77+
// add click event listner on button
78+
button.addEventListener("click", (e) => {
79+
e.preventDefault();
80+
// execute command for copy text by selecting textarea text with id
81+
document.execCommand(
82+
"copy",
83+
false,
84+
document.getElementById("PasswordResult").select()
85+
);
86+
});
87+

0 commit comments

Comments
 (0)