Skip to content

Commit ec55465

Browse files
harshita2216harshita2216
authored
Merge pull request #266 from supzi-del/supzi--del
Added random password generator
2 parents f972cfc + c8badf4 commit ec55465

File tree

5 files changed

+171
-1
lines changed

5 files changed

+171
-1
lines changed

‎Index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,6 @@
111111
| [Week Day Predictor](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Week%20Day%20Predictor%20App)| This app displays the current day of the week with quotes.|
112112
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/parallex-website)| This is a basic HTML, CSS, JAVASCRIPT website where images of this website has their position fixed that results in giving the parallex look and that is why it is called Parallex Website.|
113113
| [Payment Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/payment_integration)| This is a donation website in which we have integrated payment gateway.|
114-
| [File Zipper](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/main/File%20Zipper) |It is a encoding and decoding file
114+
| [Random Password Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Random%20Password%20Generator)| Generates a strong random password and has a copy functionality.|
115+
| [File Zipper](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/main/File%20Zipper) |It is a encoding and decoding file
116+

‎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">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="pw">
33+
<source src="https://user-images.githubusercontent.com/78655439/126331921-05967108-6108-492f-b018-63dd4d355da1.mp4">
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+
document.getElementById("btn").addEventListener("click", function() {
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: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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+
background: #fdd5d5;
21+
width: 450px;
22+
padding: 20px 30px;
23+
border-radius: 5px;
24+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
25+
}
26+
27+
.inputBox h2 {
28+
font-size: 24px;
29+
padding-left: 15px;
30+
}
31+
32+
.inputBox input {
33+
position: relative;
34+
width: 100%;
35+
height: 45px;
36+
margin: 15px 0 20px;
37+
background: #fff;
38+
border: 2px solid lightgrey;
39+
padding-left: 15px;
40+
border-radius: 5px;
41+
font-size: 15px;
42+
outline: none;
43+
transition: all 0.2s;
44+
}
45+
46+
.inputBox input:focus {
47+
border-color: #97e5d7;
48+
box-shadow: inset 0 0 3px #2fd072;
49+
}
50+
51+
.inputBox #btn {
52+
position: relative;
53+
color: #fff;
54+
cursor: pointer;
55+
background: #ba55d3;
56+
font-size: 20px;
57+
padding: 10px 15px;
58+
border-radius: 8px;
59+
width: 235px;
60+
margin-left: 18%;
61+
}
62+
63+
.inputBox #btn:active {
64+
background: #97e5d7;
65+
}
66+
67+
.container {
68+
position: absolute;
69+
}
70+
71+
i {
72+
color: #ba55d3;
73+
position: relative;
74+
margin-left: 1100%;
75+
padding-bottom: 24px;
76+
cursor: pointer;
77+
font-size: 20px;
78+
}
79+
80+
i:active {
81+
color: #97e5d7;
82+
}
83+
84+

0 commit comments

Comments
 (0)