Skip to content

Commit 5bc3c4a

Browse files
tajulafreentajulafreen
authored
Merge pull request #37 from tajulafreen/Password-Generator
50Projects-HTML-CSS-JavaScript : Password generator
2 parents 4902908 + ef8f6c1 commit 5bc3c4a

File tree

4 files changed

+229
-0
lines changed

4 files changed

+229
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,17 @@ In order to run this project you need:
386386
</details>
387387
</li>
388388

389+
<li>
390+
<details>
391+
<summary>Password Generator</summary>
392+
<p>The Password Generator App is a web application that allows users to create secure, customizable passwords based on user-defined criteria such as length and character types. It offers a simple interface for generating and copying passwords to the clipboard. This tool enhances online security by providing strong, random passwords.</p>
393+
<ul>
394+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/PasswordGenerator/">Live Demo</a></li>
395+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/PasswordGenerator">Source</a></li>
396+
</ul>
397+
</details>
398+
</li>
399+
389400
</ol>
390401

391402
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/PasswordGenerator/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
9+
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
14+
<title>Password Generator</title>
15+
</head>
16+
<body>
17+
<div class="card">
18+
<div class="container">
19+
<h2>Password Generator</h2>
20+
<div class="result-container">
21+
<span id="result"></span>
22+
<button class="btn" id="clipboard">
23+
<i class="far fa-clipboard"></i>
24+
</button>
25+
</div>
26+
<div class="settings">
27+
<div class="setting">
28+
<label>Password Length</label>
29+
<input type="number" id="length" min="4" max="20" value="20" />
30+
</div>
31+
<div class="setting">
32+
<label>Include uppercase letters</label>
33+
<input type="checkbox" id="uppercase" checked />
34+
</div>
35+
<div class="setting">
36+
<label>Include lowercase letters</label>
37+
<input type="checkbox" id="lowercase" checked />
38+
</div>
39+
<div class="setting">
40+
<label>Include numbers</label>
41+
<input type="checkbox" id="numbers" checked />
42+
</div>
43+
<div class="setting">
44+
<label>Include symbols</label>
45+
<input type="checkbox" id="symbols" checked />
46+
</div>
47+
</div>
48+
</div>
49+
<button class="btn btn-large" id="generate">Generate Password</button>
50+
</div>
51+
52+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
53+
<script src="script.js"></script>
54+
</body>
55+
</html>

‎Source-Code/PasswordGenerator/script.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* eslint-disable no-loop-func */
2+
const resultEl = document.getElementById('result');
3+
const lengthEl = document.getElementById('length');
4+
const uppercaseEl = document.getElementById('uppercase');
5+
const lowercaseEl = document.getElementById('lowercase');
6+
const numbersEl = document.getElementById('numbers');
7+
const symbolsEl = document.getElementById('symbols');
8+
const generateEl = document.getElementById('generate');
9+
const clipboardEl = document.getElementById('clipboard');
10+
11+
clipboardEl.addEventListener('click', () => {
12+
const textarea = document.createElement('textarea');
13+
const password = resultEl.innerText;
14+
15+
if (!password) {
16+
return;
17+
}
18+
19+
textarea.value = password;
20+
document.body.appendChild(textarea);
21+
textarea.select();
22+
document.execCommand('copy');
23+
textarea.remove();
24+
alert('Password copied to clipboard!');
25+
});
26+
27+
const getRandomLower = () => String.fromCharCode(Math.floor(Math.random() * 26) + 97);
28+
29+
const getRandomUpper = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65);
30+
31+
const getRandomNumber = () => String.fromCharCode(Math.floor(Math.random() * 10) + 48);
32+
33+
const getRandomSymbol = () => {
34+
const symbols = '!@#$%^&*(){}[]=<>/,.';
35+
return symbols[Math.floor(Math.random() * symbols.length)];
36+
};
37+
38+
const randomFunc = {
39+
lower: getRandomLower,
40+
upper: getRandomUpper,
41+
number: getRandomNumber,
42+
symbol: getRandomSymbol,
43+
};
44+
const generatePassword = (lower, upper, number, symbol, length) => {
45+
let generatedPassword = '';
46+
const typesCount = lower + upper + number + symbol;
47+
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(
48+
(item) => Object.values(item)[0],
49+
);
50+
51+
if (typesCount === 0) {
52+
return '';
53+
}
54+
55+
for (let i = 0; i < length; i += typesCount) {
56+
typesArr.forEach((type) => {
57+
const funcName = Object.keys(type)[0];
58+
generatedPassword += randomFunc[funcName]();
59+
});
60+
}
61+
62+
const finalPassword = generatedPassword.slice(0, length);
63+
64+
return finalPassword;
65+
};
66+
generateEl.addEventListener('click', () => {
67+
const length = +lengthEl.value;
68+
const hasLower = lowercaseEl.checked;
69+
const hasUpper = uppercaseEl.checked;
70+
const hasNumber = numbersEl.checked;
71+
const hasSymbol = symbolsEl.checked;
72+
73+
resultEl.innerText = generatePassword(
74+
hasLower,
75+
hasUpper,
76+
hasNumber,
77+
hasSymbol,
78+
length,
79+
);
80+
});

‎Source-Code/PasswordGenerator/style.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(to right, #e762ea, #b3f4f0);
9+
color: rgb(255, 255, 255);
10+
font-family: 'Courier New', Courier, monospace;
11+
font-weight: 500;
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: center;
16+
height: 100vh;
17+
overflow: hidden;
18+
padding: 10px;
19+
margin: 0;
20+
}
21+
22+
h2 {
23+
margin: 10px 0 20px;
24+
text-align: center;
25+
font-weight: 1000;
26+
}
27+
28+
.container {
29+
background-color: #2bd3df;
30+
box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
31+
padding: 20px;
32+
width: 350px;
33+
max-width: 100%;
34+
}
35+
36+
.result-container {
37+
background-color: rgba(0, 0, 0, 0.247);
38+
display: flex;
39+
justify-content: flex-start;
40+
align-items: center;
41+
position: relative;
42+
font-size: 18px;
43+
font-weight: bold;
44+
letter-spacing: 1px;
45+
padding: 12px 10px;
46+
height: 50px;
47+
width: 100%;
48+
}
49+
50+
.result-container #result {
51+
word-wrap: break-word;
52+
max-width: calc(100% - 40px);
53+
}
54+
55+
.btn {
56+
border: none;
57+
background-color: #2c085c;
58+
color: #fff;
59+
font-size: 16px;
60+
padding: 8px 12px;
61+
cursor: pointer;
62+
}
63+
64+
.result-container .btn {
65+
position: absolute;
66+
top: 5px;
67+
right: 5px;
68+
width: 40px;
69+
height: 40px;
70+
font-size: 20px;
71+
}
72+
73+
.btn-large {
74+
display: block;
75+
width: 100%;
76+
}
77+
78+
.setting {
79+
display: flex;
80+
justify-content: space-between;
81+
align-items: center;
82+
margin: 15px 0;
83+
}

0 commit comments

Comments
 (0)