├── .github
    └── workflows
    │   └── jekyll-gh-pages.yml
├── README.md
├── index.html
├── index.js
└── style.css


/.github/workflows/jekyll-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages
 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Build job
26 |   build:
27 |     runs-on: ubuntu-latest
28 |     steps:
29 |       - name: Checkout
30 |         uses: actions/checkout@v3
31 |       - name: Setup Pages
32 |         uses: actions/configure-pages@v3
33 |       - name: Build with Jekyll
34 |         uses: actions/jekyll-build-pages@v1
35 |         with:
36 |           source: ./
37 |           destination: ./_site
38 |       - name: Upload artifact
39 |         uses: actions/upload-pages-artifact@v1
40 | 
41 |   # Deployment job
42 |   deploy:
43 |     environment:
44 |       name: github-pages
45 |       url: ${{ steps.deployment.outputs.page_url }}
46 |     runs-on: ubuntu-latest
47 |     needs: build
48 |     steps:
49 |       - name: Deploy to GitHub Pages
50 |         id: deployment
51 |         uses: actions/deploy-pages@v2
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #### 🌟 star this repo if you like it
 2 | 
 3 | <br>
 4 | 
 5 | <div align="center">
 6 |   <img src="https://github.com/kanugurajesh/Advanced-Password-Generator/assets/120458029/d8b7ad97-c980-4918-a178-24a5ede89b13" alt="password" width=150 height=150>
 7 | </div>
 8 | 
 9 | <br>
10 | 
11 | # 🌟 Advanced Password Generator 🌐
12 | 
13 | Generate strong and secure passwords with this advanced password generator. Customize your passwords by choosing from a variety of elements and define the desired length for added security.
14 | 
15 | ## Features ✨
16 | 
17 | - **Customization:** Choose the elements you want to include in your password.
18 | - **Length Control:** Set the desired length of your password for optimal security.
19 | - **Emojis Included:** Spice up your passwords with emojis for an extra layer of uniqueness.
20 | 
21 | ## Configuration Options 🛠️
22 | ```bash
23 | --length: Set the length of the password (default is 12).
24 | --uppercase: Include uppercase letters.
25 | --lowercase: Include lowercase letters.
26 | --numbers: Include numbers.
27 | --symbols: Include symbols.
28 | ```
29 | 
30 | ## Screenshots
31 | 
32 | ![Screenshot 2023-12-02 223314](https://github.com/kanugurajesh/Advanced-Password-Generator/assets/120458029/140138d3-43ad-4c2a-97c4-7273b8e3fd45)
33 | 
34 | ## Tech Stack
35 | 
36 | - Html
37 | - Css
38 | - Javascript
39 | 
40 | ## 🔗 Links
41 | [![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://rajeshportfolio.me/)
42 | [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/rajesh-kanugu-aba8a3254/)
43 | [![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/exploringengin1)
44 | 
45 | ## Authors
46 | 
47 | - [@kanugurajesh](https://github.com/kanugurajesh)
48 | 
49 | ## Support
50 | 
51 | For support, you can buy me a coffee
52 | 
53 | <a href="https://www.buymeacoffee.com/kanugurajen" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
54 | 
55 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 |     <div class="container">
14 |         <div class="header">
15 |             <h1>Generate a</h1>
16 |             <h1>random password 🔑</h1>
17 |             <p>Never use an insecure password again 🔁.</p>
18 |         </div>
19 |         <div class="middle">
20 |             <div class="checkbox">
21 |                 <h1>Choose the elements to include in password ✅</h1>
22 |                 <div class="elements">
23 |                     <div class="check">
24 |                         <input type="checkbox" id="abc" name="abc" value="abc" checked>
25 |                         <label for="abc">abc</label>
26 |                     </div>
27 |                     <div class="check">
28 |                         <input type="checkbox" id="ABC" name="ABC" value="ABC">
29 |                         <label for="ABC">ABC</label>
30 |                     </div>
31 |                     <div class="check">
32 |                         <input type="checkbox" id="num" name="123" value="123">
33 |                         <label for="num">123</label>
34 |                     </div>
35 |                     <div class="check">
36 |                         <input type="checkbox" id="sym" name="!#&" value="!#&">
37 |                         <label for="sym">!#&</label>
38 |                     </div>
39 |                 </div>
40 |             </div>
41 |             <div class="slider">
42 |                 <h1>Choose the length of password 📏</h1>
43 |                 <div class="slide">
44 |                     <input type="range" min="0" max="100" step="1" id="slider" value="15">
45 |                     <div class="value" id="output">15</div>
46 |                 </div>
47 |             </div>
48 |             <div class="generator">
49 |                 Generate password 🔒
50 |             </div>
51 |         </div>
52 |         <div class="footer">
53 |             <div class="box">
54 |                 <div class="text" id="text1"></div>
55 |                 <div class="icon" id="icon1">📋</div>
56 |                 <div class="icon" id="download1">⬇️</div>
57 |             </div>
58 |             <div class="box">
59 |                 <div class="text" id="text2"></div>
60 |                 <div class="icon" id="icon2">📋</div>
61 |                 <div class="icon" id="download2">⬇️</div>
62 |             </div>
63 |         </div>
64 |     </div>
65 | </body>
66 | <script src="index.js"></script>
67 | 
68 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | // const characters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "-", "+", "=", "{", "[", "}", "]", ",", "|", ":", ";", "<", ">", ".", "?",
  2 | //     "/"];
  3 | 
  4 | const abc = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  5 | const ABC = abc.map(letter => letter.toUpperCase());
  6 | const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
  7 | const symbols = ["~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "-", "+", "=", "{", "[", "}", "]", ",", "|", ":", ";", "<", ">", ".", "?", "/"];
  8 | 
  9 | // creating an object of arrays
 10 | const arrayOfArrays = {
 11 |     "abc": abc,
 12 |     "ABC": ABC,
 13 |     "123": numbers,
 14 |     "!#&": symbols
 15 | }
 16 | 
 17 | // initializing a random array with empty value
 18 | let randomArray = [];
 19 | 
 20 | // selecting all the elements from the DOM
 21 | const checkboxes = document.querySelectorAll('input[type="checkbox"]');
 22 | let slider = document.getElementById("slider");
 23 | let output = document.getElementById("output");
 24 | let generate = document.getElementsByClassName("generator")[0];
 25 | let text1 = document.getElementById("text1");
 26 | let text2 = document.getElementById("text2");
 27 | let icon1 = document.getElementById("icon1");
 28 | let icon2 = document.getElementById("icon2");
 29 | let download1 = document.getElementById("download1");
 30 | let download2 = document.getElementById("download2");
 31 | 
 32 | // creating a password generator function
 33 | function passwordGenerator(array, value) {
 34 |     let password = "";
 35 |     for (let i = 0; i < value; i++) {
 36 |         // get a random number
 37 |         let randomNumber = Math.floor(Math.random() * array.length);
 38 |         // get the character at the random number
 39 |         let character = array[randomNumber];
 40 |         // add the character to the password
 41 |         password += character;
 42 |     }
 43 | 
 44 |     return password;
 45 | }
 46 | 
 47 | // creating a function to generate a random text file
 48 | function generateRandomTextFile(name, data, reason) {
 49 |     // get the current date and time
 50 |     let date = new Date();
 51 |     let dateTime = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes();
 52 |     // creating a content for the text file
 53 |     const text = "password: " + data + "\n" + "reason: " + reason + "\n" + "date: " + dateTime;
 54 |     // creating a file name
 55 |     const filename = name + ".txt";
 56 |     // creating a blob
 57 |     const blob = new Blob([text], { type: "text/plain" });
 58 |     // creating a url
 59 |     const url = URL.createObjectURL(blob);
 60 |     // creating a link
 61 |     const link = document.createElement("a");
 62 |     // setting the attributes of the link
 63 |     link.setAttribute("href", url);
 64 |     // setting the attributes of the link
 65 |     link.setAttribute("download", filename);
 66 |     // clicking the link
 67 |     link.click();
 68 | }
 69 | 
 70 | 
 71 | // add click event listener to checkboxes
 72 | checkboxes.forEach((checkbox) => {
 73 |     checkbox.addEventListener('click', () => {
 74 |         checked = Array.from(checkboxes).some((checkbox) => checkbox.checked);
 75 |         if (!checked) {
 76 |             document.querySelector('#abc').checked = true;
 77 |         }
 78 |     });
 79 | });
 80 | 
 81 | // adding the change event to the slider
 82 | slider.addEventListener("input", () => {
 83 |     if (slider.value < 1) {
 84 |         alert("slider value cannot be less than 1")
 85 |         slider.value = 1;
 86 |     } else {
 87 |         output.innerHTML = slider.value;
 88 |     }
 89 | })
 90 | 
 91 | // adding the click event to the generate button
 92 | generate.addEventListener("click", () => {
 93 |     // get the checked checkboxes
 94 |     let checkedData = Array.from(checkboxes).filter((checkbox) => checkbox.checked);
 95 |     // get the value of the checked checkboxes
 96 |     let checkedValues = checkedData.map((checkbox) => checkbox.value);
 97 |     // get the value of the slider
 98 |     let sliderValue = slider.value;
 99 | 
100 |     checkedValues.forEach((value) => {
101 |         randomArray = randomArray.concat(arrayOfArrays[value]);
102 |     })
103 | 
104 |     text1.textContent = passwordGenerator(randomArray, sliderValue);
105 |     text2.textContent = passwordGenerator(randomArray, sliderValue);
106 | })
107 | 
108 | // functions to copy text to clipboard
109 | icon1.addEventListener("click", () => {
110 |     // copy the text to clipboard
111 |     navigator.clipboard.writeText(text1.textContent);
112 |     alert("Copied to clipboard")
113 | })
114 | 
115 | icon2.addEventListener("click", () => {
116 |     // copy the text to clipboard
117 |     navigator.clipboard.writeText(text2.textContent);
118 |     alert("Copied to clipboard")
119 | })
120 | 
121 | // functions to take the inputs from the user and store it in text files which the user downloads
122 | download1.addEventListener("click", () => {
123 |     let fileName = prompt("Please enter name of the file", "password");
124 |     let reason = prompt("Please enter reason for generating password", "for testing");
125 |     if (fileName == null || fileName == "") {
126 |         alert("File name cannot be empty");
127 |     }
128 |     else {
129 |         generateRandomTextFile(fileName, text1.textContent, reason);
130 |     }
131 | })
132 | 
133 | download2.addEventListener("click", () => {
134 |     let fileName = prompt("Please enter name of the file", "password");
135 |     let reason = prompt("Please enter reason for generating password", "for testing");
136 |     if (fileName == null || fileName == "") {
137 |         alert("File name cannot be empty");
138 |     }
139 |     else {
140 |         generateRandomTextFile(fileName, text2.textContent, reason);
141 |     }
142 | })


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | ::-webkit-scrollbar {
  8 |     display: none;
  9 | }
 10 | 
 11 | body {
 12 |     background-color: #1F2937;
 13 |     width: 100vw;
 14 |     height: 100vh;
 15 |     user-select: none;
 16 | }
 17 | 
 18 | .container {
 19 |     width: 100%;
 20 |     height: 100%;
 21 |     display: flex;
 22 |     flex-direction: column;
 23 |     padding: 10vh 4vw;
 24 |     box-sizing: border-box;
 25 |     color: white;
 26 |     cursor: not-allowed;
 27 | }
 28 | 
 29 | .header h1 {
 30 |     font-size: 4rem;
 31 |     color: #fff;
 32 | }
 33 | 
 34 | .header h1:nth-child(2) {
 35 |     color: #4ADF86;
 36 | }
 37 | 
 38 | .header p {
 39 |     margin-top: 2.5vh;
 40 |     font-size: 2rem;
 41 |     color: #fff;
 42 | }
 43 | 
 44 | .middle {
 45 |     margin-top: 3.5vh;
 46 |     width: 100%;
 47 |     display: flex;
 48 |     flex-direction: column;
 49 |     justify-content: start;
 50 |     gap: 2vw;
 51 | }
 52 | 
 53 | .checkbox {
 54 |     display: flex;
 55 |     flex-direction: column;
 56 |     gap: 1vw;
 57 | }
 58 | 
 59 | .elements {
 60 |     display: flex;
 61 |     flex-direction: row;
 62 |     gap: 2vw;
 63 |     font-size: xx-large;
 64 | }
 65 | 
 66 | .elements input {
 67 |     width: 2vw;
 68 |     height: 2vh;
 69 | }
 70 | 
 71 | .slider {
 72 |     width: 100%;
 73 |     height: 12vh;
 74 |     display: flex;
 75 |     flex-direction: column;
 76 |     gap: 1vw;
 77 | }
 78 | 
 79 | .slide {
 80 |     width: 100%;
 81 |     height: 4vh;
 82 |     display: flex;
 83 |     justify-content: space-between;
 84 |     align-items: center;
 85 |     flex-direction: row;
 86 |     gap: 3vh;
 87 | }
 88 | 
 89 | .slide input {
 90 |     width: 92%;
 91 |     /* cursor: pointer; */
 92 |     cursor: grab;
 93 | }
 94 | 
 95 | .slide input:active {
 96 |     cursor: grabbing;
 97 | }
 98 | 
 99 | .slide .value {
100 |     background-color: #273549;
101 |     width: 5%;
102 |     height: 6vh;
103 |     text-align: center;
104 | }
105 | 
106 | #output {
107 |     display: flex;
108 |     justify-content: center;
109 |     align-items: center;
110 |     font-size: x-large;
111 |     font-weight: 900;
112 | }
113 | 
114 | .generator {
115 |     width: 25%;
116 |     height: 7vh;
117 |     background-color: #4ADF86;
118 |     border: none;
119 |     border-radius: 5px;
120 |     font-size: xx-large;
121 |     font-weight: 900;
122 |     color: white;
123 |     cursor: pointer;
124 |     display: flex;
125 |     justify-content: center;
126 |     align-items: center;
127 |     transition: all 0.5s ease-in-out;
128 | }
129 | 
130 | .footer {
131 |     margin-top: 3rem;
132 |     border-top: #273549 solid 5px;
133 |     width: 100%;
134 |     height: 12vh;
135 |     display: flex;
136 |     justify-content: space-around;
137 |     align-items: center;
138 |     flex-direction: row;
139 |     gap: 2vw;
140 |     padding-top: 3rem;
141 |     box-sizing: border-box;
142 | }
143 | 
144 | .box {
145 |     width: 40%;
146 |     height: 100%;
147 |     background-color: #273549;
148 |     display: flex;
149 |     flex-direction: row;
150 |     justify-content: center;
151 |     align-items: center;
152 |     border-radius: 5px;
153 | }
154 | 
155 | .text {
156 |     width: 80%;
157 |     height: 100%;
158 |     display: flex;
159 |     justify-content: center;
160 |     align-items: center;
161 |     font-size: 1.3rem;
162 |     color: #55F991;
163 |     font-weight: 900;
164 |     overflow-x: scroll;
165 |     overflow-y: hidden;
166 |     white-space: nowrap;
167 |     padding: 0 1rem;
168 |     box-sizing: border-box;
169 | }
170 | 
171 | .icon {
172 |     width: 10%;
173 |     height: 100%;
174 |     display: flex;
175 |     justify-content: center;
176 |     align-items: center;
177 |     font-size: xx-large;
178 |     cursor: pointer;
179 |     transition: all 0.5s ease-in-out;
180 | }
181 | 
182 | .icon:hover {
183 |     transform: scale(1.2);
184 | }
185 | 
186 | .box:hover {
187 |     border: 4px solid #55F991;
188 |     border-style: double;
189 | }
190 | 
191 | .generator:hover {
192 |     scale: 1.05;
193 | }
194 | 
195 | .check {
196 |     width: 10%;
197 |     /* height: 80%; */
198 | }
199 | 
200 | .check input,
201 | label {
202 |     cursor: pointer;
203 | }


--------------------------------------------------------------------------------