Skip to content

Commit f2ea27d

Browse files
PBJIPBJI
authored
Merge pull request #702 from xlo-u/master
Add Password Generator
2 parents 5dd3f87 + 0048878 commit f2ea27d

File tree

5 files changed

+217
-0
lines changed

5 files changed

+217
-0
lines changed

‎PasswordGenerator/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Password Generator
2+
3+
[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
4+
[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)
5+
6+
7+
8+
Hello Community,
9+
The password generator generates passwords of different lengths and can include or
10+
exclude special characters based on user selection.
11+
wuth the help of HTML layout, CSS styling, and JavaScript functions.
12+
13+
## Requirements
14+
15+
No external package is required.
16+
17+
## Usage
18+
19+
Using a password generator ensures that your passwords are strong and unique, making it difficult for hackers to guess or crack them.
20+
21+
22+
## Screenshort
23+
24+
![image](https://github.com/xlo-u/javascript-mini-projects/assets/67045160/e137a72a-27eb-469b-98f7-1a7ed259bdb3)
25+
26+
27+
## Contributing
28+
29+
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
30+
31+
Please make sure to update tests as appropriate.
32+
33+

‎PasswordGenerator/app.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
//DOM Elements
2+
const passwordElem = document.querySelector('.password');
3+
const btnElem = document.getElementById('btn-generate');
4+
const passwordLengthElem = document.getElementById('password-length-number');
5+
const lowercaseElem = document.getElementById('lowercase');
6+
const uppercaseElem = document.getElementById('uppercase');
7+
const numbersElem = document.getElementById('numbers');
8+
const symbolsElem = document.getElementById('symbols');
9+
10+
//when user clicks on btn, generate a new password
11+
btnElem.addEventListener('click', updateUI);
12+
13+
//display generated password on UI
14+
function updateUI(){
15+
const passwordLength = passwordLengthElem.value;
16+
const includeLowercase = lowercaseElem.checked;
17+
const includeUppercase = uppercaseElem.checked;
18+
const includeNumbers = numbersElem.checked;
19+
const includeSymbols = symbolsElem.checked;
20+
const password = generatePassword(passwordLength, includeLowercase, includeUppercase, includeNumbers, includeSymbols);
21+
passwordElem.innerText = password;
22+
}
23+
24+
function generatePassword(len, isLC, isUC, isNum, isSym){
25+
let charCodes = [];
26+
if(isLC)
27+
charCodes = LOWERCASE_CHAR_CODES;
28+
if(isUC)
29+
charCodes = charCodes.concat(UPPERCASE_CHAR_CODES);
30+
if(isNum)
31+
charCodes = charCodes.concat(NUMBER_CHAR_CODES);
32+
if(isSym)
33+
charCodes = charCodes.concat(SYMBOL_CHAR_CODES);
34+
35+
const finalPassword = [];
36+
for(let i = 0; i < len; i++){
37+
const randomCode = charCodes[Math.floor(Math.random() * charCodes.length)];
38+
finalPassword.push(String.fromCharCode(randomCode));
39+
}
40+
41+
//if all of the checkbox are unchecked
42+
if(charCodes.length === 0)
43+
return `Select at least one option`;
44+
45+
return finalPassword.join(''); //return string of array finalPassword
46+
}
47+
48+
function arrayLowToHigh(low, high){
49+
let array = [];
50+
for(let i = low; i <= high; i++){
51+
array.push(i);
52+
}
53+
return array;
54+
}
55+
56+
//Arrays storing all our characters
57+
const LOWERCASE_CHAR_CODES = arrayLowToHigh(97, 122);
58+
const UPPERCASE_CHAR_CODES = arrayLowToHigh(65, 90);
59+
const NUMBER_CHAR_CODES = arrayLowToHigh(48, 57);
60+
const SYMBOL_CHAR_CODES = arrayLowToHigh(33, 47)
61+
.concat(arrayLowToHigh(58, 64))
62+
.concat(arrayLowToHigh(91, 96))
63+
.concat(arrayLowToHigh(123, 126));

‎PasswordGenerator/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
<title>Password Generator</title>
7+
<link rel="stylesheet" href="./style.css" type="text/css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1 class="title">Password Generator</h1>
12+
<p class="password">Your Password</p>
13+
<button class="btn" id="btn-generate">GENERATE!</button>
14+
<p class="desc-title">Preferences</p>
15+
<form class="form">
16+
<label for="password-length-number">Length</label>
17+
<input type="number" name="pln" id="password-length-number" class="number-input" min="1" max="50" value="8">
18+
19+
<label for="lowercase">Lower Case Alphabets</label>
20+
<input type="checkbox" name="lc" id="lowercase" checked>
21+
22+
<label for="lowercase">Upper Case Alphabets</label>
23+
<input type="checkbox" name="uc" id="uppercase">
24+
25+
<label for="lowercase">Numbers</label>
26+
<input type="checkbox" name="num" id="numbers">
27+
28+
<label for="lowercase">Symbols</label>
29+
<input type="checkbox" name="sym" id="symbols">
30+
</form>
31+
</div>
32+
<script src="./app.js" type="text/javascript"></script>
33+
</body>
34+
</html>

‎PasswordGenerator/resource.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## CheatSheet Reference
2+
3+
[ASCII](https://www.petefreitag.com/cheatsheets/ascii-codes/)

‎PasswordGenerator/style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
*::before,
7+
*::after {
8+
box-sizing: border-box;
9+
}
10+
html,
11+
body {
12+
font-size: 10px;
13+
font-family: 'lato', Arial, Helvetica, sans-serif;
14+
}
15+
body {
16+
min-height: 100vh;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
background: linear-gradient(115deg, #85ee56 50%, #144dd5 50%);
21+
}
22+
.container {
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
justify-content: space-between;
27+
background: #eee;
28+
border-radius: 0.5rem;
29+
padding: 2rem;
30+
min-height: 35rem;
31+
}
32+
.title {
33+
width: 71%;
34+
text-align: center;
35+
}
36+
.desc-title {
37+
font-size: 1.6rem;
38+
text-align: left;
39+
width: 71%;
40+
border-bottom: 1px solid #144dd5;
41+
}
42+
.form {
43+
display: grid;
44+
grid-template-columns: auto auto;
45+
row-gap: 1rem;
46+
column-gap: 3rem;
47+
align-items: center;
48+
justify-content: center;
49+
font-size: 1.3rem;
50+
}
51+
label{
52+
font-weight: bold;
53+
}
54+
.number-input {
55+
width: 4rem;
56+
}
57+
.password {
58+
background: black;
59+
color: white;
60+
padding: 1rem;
61+
font-size: 1.5rem;
62+
height: 6rem;
63+
width: 28rem;
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
word-break: break-all;
68+
border-radius: 0.5rem;
69+
}
70+
.btn {
71+
cursor: pointer;
72+
border: none;
73+
background: #144dd5;
74+
border-radius: 0.5rem;
75+
padding: 1rem;
76+
width: 100%;
77+
color: #fff;
78+
font-weight: bold;
79+
letter-spacing: 0.3rem;
80+
transition: opacity ease-in-out 0.2s;
81+
}
82+
.btn:hover {
83+
opacity: 0.9;
84+
}

0 commit comments

Comments
 (0)