Skip to content

Commit 2c8940d

Browse files
supzi-delsupzi-del
committed
Added random password generator
1 parent 9c15237 commit 2c8940d

File tree

4 files changed

+172
-0
lines changed

4 files changed

+172
-0
lines changed

‎Random Password Generator/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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">
6+
<title>Random Password Generator</title>
7+
<meta name="description" content="Generates a strong random password.">
8+
<meta name="author" content="Supritha">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="inputBox">
15+
<h2>Random Password Generator</h2><input type="text" placeholder="Create password" id="password">
16+
<div id="btn" onclick="generatePassword();">Generate Password</div>
17+
</div>
18+
<!--inputBox-->
19+
</div>
20+
<div id="clipboard">
21+
<i class="fa fa-clipboard" aria-hidden="true"></i>
22+
</div>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>
26+

‎Random Password Generator/readme.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<h1>Random Strong Password Generator</h1>
2+
3+
<p>Generates a strong random password and has a copy functionality.</p>
4+
5+
### Use of the Project:
6+
7+
<p>User clicks on the "Generate button" to obtain a random password and clicks on the clipboard icon to copy the generated password.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Click Generate!
29+
30+
<h3> Video Demo </h3>
31+
32+
<video controls width="960" alt="">
33+
<source src="">
34+
</video>
35+
36+
<br>
37+

‎Random Password Generator/script.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//generate random password using for loop
2+
function generatePassword() {
3+
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+?<>{}[]:";
4+
var passwordLength = 10;
5+
var password = "";
6+
for (var i = 0; i < passwordLength; i++) {
7+
var randomChar = Math.floor(Math.random() * chars.length)
8+
password += chars.charAt(randomChar);
9+
}
10+
document.getElementById("password").value = password;
11+
}
12+
13+
//copy to clipboard
14+
clipboard.onclick = function() {
15+
16+
password.select();
17+
18+
document.execCommand("copy");
19+
}
20+
21+

‎Random Password Generator/style.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: "Courier New";
5+
box-sizing: border-box;
6+
user-select: none;
7+
}
8+
9+
html,
10+
body {
11+
display: flex;
12+
height: 100%;
13+
align-items: center;
14+
justify-content: center;
15+
background: #f2f2f2;
16+
}
17+
18+
.inputBox {
19+
position: relative;
20+
21+
background: #fdd5d5;
22+
width: 450px;
23+
padding: 20px 30px;
24+
border-radius: 5px;
25+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
26+
}
27+
28+
.inputBox h2 {
29+
font-size: 24px;
30+
padding-left: 15px;
31+
}
32+
33+
.inputBox input {
34+
position: relative;
35+
width: 100%;
36+
height: 45px;
37+
border: none;
38+
margin: 15px 0 20px;
39+
40+
background: #fff;
41+
42+
border: 2px solid lightgrey;
43+
padding-left: 15px;
44+
border-radius: 5px;
45+
font-size: 15px;
46+
outline: none;
47+
transition: all 0.2s;
48+
}
49+
50+
.inputBox input:focus {
51+
border-color: #97e5d7;
52+
box-shadow: inset 0 0 3px #2fd072;
53+
}
54+
55+
.inputBox #btn {
56+
position: relative;
57+
color: #fff;
58+
cursor: pointer;
59+
background: #ba55d3;
60+
font-size: 20px;
61+
padding: 10px 15px;
62+
border-radius: 8px;
63+
width: 235px;
64+
margin-left: 18%;
65+
}
66+
67+
.inputBox #btn:active {
68+
background: #97e5d7;
69+
}
70+
71+
.container {
72+
position: absolute;
73+
}
74+
75+
i {
76+
color: #ba55d3;
77+
position: relative;
78+
margin-left: 1100%;
79+
padding-bottom: 24px;
80+
cursor: pointer;
81+
font-size: 20px;
82+
}
83+
84+
i:active {
85+
color: #97e5d7;
86+
}
87+
88+

0 commit comments

Comments
 (0)