Skip to content

Commit 7e4b5f7

Browse files
solygambassolygambas
committed
add password generator random functions
1 parent aaeb48e commit 7e4b5f7

File tree

5 files changed

+163
-2
lines changed

5 files changed

+163
-2
lines changed

‎29-double click heart/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ small {
2929
.loveMe {
3030
height: 440px;
3131
width: 300px;
32-
background: url("https://images.unsplash.com/photo-1610492219783-3fa7236e82a9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80")
32+
background: url("https://images.unsplash.com/photo-1597540103960-2a6528f09ae9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=321&q=80")
3333
no-repeat center center/cover;
3434
margin: auto;
3535
cursor: pointer;

‎31-password generator/index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Password Generator</title>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<h2>Password Generator</h2>
18+
<div class="result-container">
19+
<span id="result"></span>
20+
<button class="btn" id="clipboard">
21+
<i class="far fa-copy"></i>
22+
</button>
23+
</div>
24+
<div class="settings">
25+
<div class="setting">
26+
<label for="length">Password Length</label>
27+
<input
28+
type="number"
29+
name="length"
30+
id="length"
31+
min="4"
32+
max="20"
33+
value="20"
34+
/>
35+
</div>
36+
<div class="setting">
37+
<label for="uppercase">Include uppercase letters</label>
38+
<input type="checkbox" name="uppercase" id="uppercase" checked />
39+
</div>
40+
<div class="setting">
41+
<label for="lowercase">Include lowercase letters</label>
42+
<input type="checkbox" name="lowercase" id="lowercase" checked />
43+
</div>
44+
<div class="setting">
45+
<label for="numbers">Include numbers</label>
46+
<input type="checkbox" name="numbers" id="numbers" checked />
47+
</div>
48+
<div class="setting">
49+
<label for="symbols">Include symbols</label>
50+
<input type="checkbox" name="symbols" id="symbols" checked />
51+
</div>
52+
</div>
53+
<button class="btn btn-large" id="generate">Generate Password</button>
54+
</div>
55+
56+
<script src="script.js"></script>
57+
</body>
58+
</html>

‎31-password generator/script.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Random functions
2+
// fromCharCode: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
3+
// ASCII codes: https://www.w3schools.com/charsets/ref_html_ascii.asp
4+
const randomFunctions = {
5+
lower: getRandomLower,
6+
upper: getRandomUpper,
7+
number: getRandomSymbol,
8+
symbol: getRandomSymbol,
9+
};
10+
11+
const getRandomLower = () =>
12+
String.fromCharCode(Math.floor(Math.random() * 26) + 97);
13+
14+
const getRandomUpper = () =>
15+
String.fromCharCode(Math.floor(Math.random() * 26) + 65);
16+
17+
const getRandomNumber = () =>
18+
String.fromCharCode(Math.floor(Math.random() * 10) + 48);
19+
20+
const getRandomSymbol = () => {
21+
const symbols = "!@#$%^&*(){}[]=<>/,.";
22+
return symbols[Math.floor(Math.random() * symbols.length)];
23+
};

‎31-password generator/style.css

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
color: #fff;
10+
font-family: "Muli", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
overflow: hidden;
17+
padding: 10px;
18+
margin: 0;
19+
}
20+
21+
h2 {
22+
margin: 10px 0 20px;
23+
text-align: center;
24+
}
25+
26+
.container {
27+
background-color: #23235b;
28+
box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
29+
padding: 20px;
30+
width: 350px;
31+
max-width: 100%;
32+
}
33+
34+
.result-container {
35+
background-color: rgba(0, 0, 0, 0.4);
36+
display: flex;
37+
justify-content: flex-start;
38+
align-items: center;
39+
position: relative;
40+
font-size: 18px;
41+
letter-spacing: 1px;
42+
padding: 12px 10px;
43+
height: 50px;
44+
width: 100%;
45+
}
46+
47+
.result-container #result {
48+
word-wrap: break-word;
49+
max-width: calc(100% - 40px);
50+
}
51+
52+
.result-container .btn {
53+
position: absolute;
54+
top: 5px;
55+
right: 5px;
56+
width: 40px;
57+
height: 40px;
58+
font-size: 20px;
59+
}
60+
61+
.btn {
62+
background-color: #3b3b98;
63+
color: #fff;
64+
border: none;
65+
font-size: 16px;
66+
padding: 8px 12px;
67+
cursor: pointer;
68+
}
69+
70+
.btn-large {
71+
display: block;
72+
width: 100%;
73+
}
74+
75+
.setting {
76+
display: flex;
77+
justify-content: space-between;
78+
align-items: center;
79+
margin: 15px 0;
80+
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
| 28 | [GitHub Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/28-github%20profiles) | [Live Demo](https://codepen.io/solygambas/full/GRjzmVR) |
3737
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/29-double%20click%20heart) | [Live Demo](https://codepen.io/solygambas/full/XWjOaOK) |
3838
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/30-auto%20text%20effect) | [Live Demo](https://codepen.io/solygambas/full/JjRxrbM) |
39-
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-generator) | [Live Demo](/password-generator/) |
39+
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/31-password%20generator) | [Live Demo](/password-generator/) |
4040
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/good-cheap-fast) | [Live Demo](/good-cheap-fast/) |
4141
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/notes-app) | [Live Demo](/notes-app/) |
4242
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/animated-countdown) | [Live Demo](/animated-countdown/) |

0 commit comments

Comments
 (0)