Skip to content

Commit a0b30a9

Browse files
programandoconroprogramandoconro
committed
create password generator mini project
1 parent aa6125a commit a0b30a9

File tree

3 files changed

+191
-0
lines changed

3 files changed

+191
-0
lines changed

‎Languages/HTML-CSS-Javascript/password-generator/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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 rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href=
8+
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css">
9+
</link>
10+
11+
<title>Password Generator</title>
12+
</head>
13+
<body>
14+
<div class="card">
15+
<h2>Password Generator</h2>
16+
<div id="clipboard">
17+
<i class="fa-solid fa-clipboard"></i>
18+
</div>
19+
<div id="password"></div>
20+
<div class="option-container">
21+
<p>Password length</p>
22+
<input id="length" value="20" type="number">
23+
<p>Include uppercase letters</p>
24+
<input checked id="uppercase" type="checkbox">
25+
<p>Include lowercase letters</p>
26+
<input checked id="lowercase" type="checkbox">
27+
<p>Include numbers</p>
28+
<input checked id="numbers" type="checkbox">
29+
<p>Include symbols</p>
30+
<input checked id="symbols" type="checkbox">
31+
</div>
32+
<button id="generate" type="button">Generate Password</button>
33+
</div>
34+
</body>
35+
<script src="script.js"></script>
36+
</html>

‎Languages/HTML-CSS-Javascript/password-generator/script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const password = document.getElementById("password");
2+
const length = document.getElementById("length");
3+
const uppercase = document.getElementById("uppercase");
4+
const lowercase = document.getElementById("lowercase");
5+
const numbers = document.getElementById("numbers");
6+
const symbols = document.getElementById("symbols");
7+
const generate = document.getElementById("generate");
8+
const clipboard = document.getElementById("clipboard");
9+
10+
const lettersLowercase = "qwertyuiopasdfghjklzxcvbnm".split("");
11+
const lettersUppercase = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
12+
const numbersArray = "1234567890".split("");
13+
const symbolsArray = "!@#$%^&*()_+=-[];',./?><:}|{".split("");
14+
15+
generate.addEventListener("click", () => {
16+
generatePassword(lettersLowercase);
17+
});
18+
19+
function generatePassword() {
20+
const passwordArray = [];
21+
password.innerText = "";
22+
const earlyReturn =
23+
!uppercase.checked &&
24+
!lowercase.checked &&
25+
!numbers.checked &&
26+
!symbols.checked;
27+
28+
if (earlyReturn) return;
29+
30+
if (uppercase.checked) {
31+
lettersUppercase.forEach((letter) => {
32+
passwordArray.push(letter);
33+
});
34+
}
35+
if (lowercase.checked) {
36+
lettersLowercase.forEach((letter) => {
37+
passwordArray.push(letter);
38+
});
39+
}
40+
if (numbers.checked) {
41+
numbersArray.forEach((letter) => {
42+
passwordArray.push(letter);
43+
});
44+
}
45+
if (symbols.checked) {
46+
symbolsArray.forEach((letter) => {
47+
passwordArray.push(letter);
48+
});
49+
}
50+
51+
for (let i = 0; i < length.value; i++) {
52+
const randomChar = chooseRandom(passwordArray);
53+
password.innerText += randomChar;
54+
}
55+
}
56+
57+
function chooseRandom(arr) {
58+
const randomIndex = Math.floor(Math.random(arr.length - 1) * arr.length);
59+
const randomValue = arr[randomIndex];
60+
return randomValue;
61+
}
62+
63+
clipboard.addEventListener("click", () => {
64+
updateClipboard(password.innerText);
65+
});
66+
67+
function updateClipboard(newClip) {
68+
navigator.clipboard.writeText(newClip).then(
69+
() => {
70+
alert("Copied to clipboard!");
71+
},
72+
() => {
73+
alert("Failed to copy to clipboard");
74+
}
75+
);
76+
}

‎Languages/HTML-CSS-Javascript/password-generator/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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-color: #3b3b98;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
font-family: "Muli", sans-serif;
14+
}
15+
16+
.card {
17+
background-color: #23235b;
18+
padding: 10px;
19+
color: #fff;
20+
position: relative;
21+
box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
22+
}
23+
24+
.card h2 {
25+
text-align: center;
26+
}
27+
28+
.option-container {
29+
display: grid;
30+
grid-template-columns: 2fr 1fr;
31+
align-items: center;
32+
padding: 0;
33+
margin: 0;
34+
}
35+
.option-container p {
36+
padding: 0;
37+
margin: 10px;
38+
}
39+
40+
.option-container input {
41+
justify-self: right;
42+
max-width: 40px;
43+
border: none;
44+
}
45+
#password {
46+
background-color: black;
47+
width: 100%;
48+
border: none;
49+
height: 38px;
50+
margin-bottom: 10px;
51+
color: white;
52+
}
53+
#clipboard {
54+
position: absolute;
55+
background-color: darkblue;
56+
right: 15px;
57+
font-size: 20px;
58+
width: 30px;
59+
display: flex;
60+
justify-content: center;
61+
height: 26px;
62+
transform: translateY(5px);
63+
align-items: center;
64+
cursor: pointer;
65+
}
66+
67+
#generate {
68+
border: none;
69+
margin-left: auto;
70+
margin-right: auto;
71+
display: block;
72+
background-color: darkblue;
73+
color: white;
74+
height: 40px;
75+
width: 90%;
76+
margin: 10px;
77+
font-family: "Muli", sans-serif;
78+
cursor: pointer;
79+
}

0 commit comments

Comments
 (0)