Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5bc3c4a

Browse files
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>
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>
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+
});
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)

AltStyle によって変換されたページ (->オリジナル) /