├── images
├── copy.png
└── gen.png
├── logic.js
├── style.css
└── Index.html
/images/copy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Password-Generator/HEAD/images/copy.png
--------------------------------------------------------------------------------
/images/gen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moeez-Rajpoot/Password-Generator/HEAD/images/gen.png
--------------------------------------------------------------------------------
/logic.js:
--------------------------------------------------------------------------------
1 |
2 | function Generate() {
3 |
4 | var password=document.getElementById("input");
5 |
6 | var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
7 | var passwordLength = 12;
8 | var password = "";
9 | for (var i = 0; i <= passwordLength; i++) {
10 | var randomNumber = Math.floor(Math.random() * chars.length);
11 | console.log(randomNumber);
12 | password += chars.substring(randomNumber, randomNumber +1);
13 | console.log(password)
14 | }
15 | document.getElementById("input").value = password;
16 | document.getElementById("input").style.color= "black";
17 | }
18 |
19 | function copyPassword() {
20 | var copyText = document.getElementById("input");
21 | copyText.select();
22 |
23 | // Use the Clipboard API to write the selected text to the clipboard
24 | navigator.clipboard.writeText(copyText.value)
25 | .then(() => {
26 | console.log("Text copied to clipboard successfully!");
27 | })
28 | .catch((error) => {
29 | console.error("Failed to copy text to clipboard:", error);
30 | });
31 | document.getElementById("text").style.display="block";
32 | }
33 |
34 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | color: azure;
5 | }
6 | .myclass{
7 | background-color: black;
8 | }
9 |
10 | .container{
11 |
12 | margin: -100px auto;
13 | width: 90%;
14 | max-width: 700px;
15 | }
16 |
17 | .rem{
18 | margin-top: 20px;
19 | background-color: white;
20 | height: 60px;
21 | width: 500px;
22 | border-radius: 10px;
23 | }
24 |
25 | .rem input{
26 |
27 | border-radius: 10px;
28 | padding: 16px;
29 | width: 500px;
30 | max-width: 430px;
31 | outline: none;
32 | border: none;
33 | }
34 | #img1{
35 |
36 | height: 50px;
37 | width: auto;
38 | float: right;
39 | padding: 10px;
40 | margin-top: 7px;
41 | }
42 | #img2{
43 | height: auto;
44 | width: 18px;
45 | justify-content: center;
46 | margin-right: 10px;
47 | margin-top: 10px;
48 | float: right;
49 | }
50 |
51 | #inner span{
52 | color: green;
53 | border-bottom: 2px solid green;
54 | }
55 |
56 | .generate{
57 |
58 | margin-top: 20px;
59 | color: white;
60 | background-color: green;
61 | border-radius: 5px;
62 | width: 200px;
63 | height: 50px;
64 | max-width: 430px;
65 | }
66 | .generate button{
67 | outline: none;
68 | border: none;
69 | font-family:'Times New Roman', Times, serif;
70 | font-size: 20px;
71 | color: white;
72 | border-radius: 5px;
73 | background-color: transparent;
74 | width: 120px;
75 | height: 50px;
76 | max-width: 430px;
77 | margin-left: 10px;
78 | white-space: nowrap;;
79 |
80 |
81 | }
82 | .generate button:focus {
83 | outline: none;
84 | }
85 |
86 | li:hover{
87 | top: -0.5px;
88 | box-shadow: 0 3px rgb(16, 67, 236);
89 | }
90 |
91 | #text{
92 |
93 | display: none;
94 | margin-top: 10px;
95 |
96 |
97 |
98 |
99 | }
--------------------------------------------------------------------------------
/Index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
30 |
31 |
32 |
35 |
36 |
37 |
Generate a
Random Password
38 |
39 |
40 |
41 |
42 |
Text Copied !
43 |
44 |
45 |
46 |
47 |
48 |