├── image
    ├── screenshot.png
    ├── icons8-twitter-circled-92.png
    ├── icons8-linkedin.svg
    └── icons8-github.svg
├── README.md
├── LICENSE
├── .github
    └── workflows
    │   └── jekyll-gh-pages.yml
├── script.js
├── style.css
└── index.html


/image/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshSingh21/Pass--Generator/HEAD/image/screenshot.png


--------------------------------------------------------------------------------
/image/icons8-twitter-circled-92.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshSingh21/Pass--Generator/HEAD/image/icons8-twitter-circled-92.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pass--Generator
 2 | A password generator is a software tool that creates random and complex passwords for increased security. It typically uses combination of uppercase and lowercase letters, numbers, and special characters to create complex passwords. The length and complexity of the generated passwords can usually be customized by the user .
 3 | <br>
 4 | 
 5 | <br>
 6 | 
 7 | Tech Stack :  Html, Css,Javascript 
 8 | <br>
 9 | 
10 | ![Screenshot ](https://github.com/HarshSingh21/Pass--Generator/blob/main/image/screenshot.png?raw=true)
11 | 
12 | 


--------------------------------------------------------------------------------
/image/icons8-linkedin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#0288D1" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"/><path fill="#FFF" d="M12 19H17V36H12zM14.485 17h-.028C12.965 17 12 15.888 12 14.499 12 13.08 12.995 12 14.514 12c1.521 0 2.458 1.08 2.486 2.499C17 15.887 16.035 17 14.485 17zM36 36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698-1.501 0-2.313 1.012-2.707 1.99C24.957 25.543 25 26.511 25 27v9h-5V19h5v2.616C25.721 20.5 26.85 19 29.738 19c3.578 0 6.261 2.25 6.261 7.274L36 36 36 36z"/></svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Harsh Singh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/image/icons8-github.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="92px" height="92px"><path d="M32 6C17.641 6 6 17.641 6 32c0 12.277 8.512 22.56 19.955 25.286-.592-.141-1.179-.299-1.755-.479V50.85c0 0-.975.325-2.275.325-3.637 0-5.148-3.245-5.525-4.875-.229-.993-.827-1.934-1.469-2.509-.767-.684-1.126-.686-1.131-.92-.01-.491.658-.471.975-.471 1.625 0 2.857 1.729 3.429 2.623 1.417 2.207 2.938 2.577 3.721 2.577.975 0 1.817-.146 2.397-.426.268-1.888 1.108-3.57 2.478-4.774-6.097-1.219-10.4-4.716-10.4-10.4 0-2.928 1.175-5.619 3.133-7.792C19.333 23.641 19 22.494 19 20.625c0-1.235.086-2.751.65-4.225 0 0 3.708.026 7.205 3.338C28.469 19.268 30.196 19 32 19s3.531.268 5.145.738c3.497-3.312 7.205-3.338 7.205-3.338.567 1.474.65 2.99.65 4.225 0 2.015-.268 3.19-.432 3.697C46.466 26.475 47.6 29.124 47.6 32c0 5.684-4.303 9.181-10.4 10.4 1.628 1.43 2.6 3.513 2.6 5.85v8.557c-.576.181-1.162.338-1.755.479C49.488 54.56 58 44.277 58 32 58 17.641 46.359 6 32 6zM33.813 57.93C33.214 57.972 32.61 58 32 58 32.61 58 33.213 57.971 33.813 57.93zM37.786 57.346c-1.164.265-2.357.451-3.575.554C35.429 57.797 36.622 57.61 37.786 57.346zM32 58c-.61 0-1.214-.028-1.813-.07C30.787 57.971 31.39 58 32 58zM29.788 57.9c-1.217-.103-2.411-.289-3.574-.554C27.378 57.61 28.571 57.797 29.788 57.9z"/></svg>


--------------------------------------------------------------------------------
/.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@v1
52 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | const lengthSlider = document.querySelector(".pass-length input");
 2 | const options = document.querySelectorAll(".option input");
 3 | const copyIcon = document.querySelector(".input-box span");
 4 | const passwordInput = document.querySelector(".input-box input");
 5 | const passIndicator = document.querySelector(".pass-indicator");
 6 | const generateBtn = document.querySelector(".generate-btn");
 7 | const characters = {
 8 |     lowercase: "abcdefghijklmnopqrstuvwxyz",
 9 |     uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
10 |     numbers: "0123456789",
11 |     symbols: "!$%&|[](){}:;.,*+-#@<>~"
12 | }
13 | 
14 | const generatePassword = () => {
15 |     let staticPassword = "",
16 |         randomPassword = "",
17 |         excludeDuplicate = false,
18 |         passLength = lengthSlider.value;
19 | 
20 |     options.forEach(option => {
21 |         if (option.checked) {
22 |             if (option.id !== "exc-duplicate" && option.id !== "spaces") {
23 |                 staticPassword += characters[option.id];
24 |             } else if (option.id === "spaces") {
25 |                 staticPassword += `  ${staticPassword}  `;
26 |             } else {
27 |                 excludeDuplicate = true;
28 |             }
29 |         }
30 |     });
31 | 
32 |     for (let i = 0; i < passLength; i++) {
33 |         let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];
34 |         if (excludeDuplicate) {
35 |             !randomPassword.includes(randomChar) || randomChar == " " ? randomPassword += randomChar : i--;
36 |         } else {
37 |             randomPassword += randomChar;
38 |         }
39 |     }
40 |     passwordInput.value = randomPassword;
41 | 
42 | }
43 | 
44 | const updatePassIndicator = () => {
45 |     passIndicator.id = lengthSlider.value <= 8 ? "weak" : lengthSlider.value <= 16 ? "medium" : "strong";
46 | }
47 | 
48 | const updateSlider = () => {
49 |     document.querySelector(".pass-length span").innerText = lengthSlider.value;
50 |     generatePassword();
51 |     updatePassIndicator();
52 | }
53 | updateSlider();
54 | 
55 | const copyPassword = () => {
56 |     navigator.clipboard.writeText(passwordInput.value);
57 |     copyIcon.innerText = "check";
58 |     copyIcon.style.color = "#4285f4";
59 |     setTimeout(() => {
60 |         copyIcon.innerText = "copy_all";
61 |         copyIcon.style.color = "#707070";
62 |     }, 1500);
63 | }
64 | 
65 | copyIcon.addEventListener("click", copyPassword);
66 | lengthSlider.addEventListener("input", updateSlider);
67 | generateBtn.addEventListener("click", generatePassword);
68 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
  2 | *{
  3 |     margin: 0;
  4 | 
  5 |     padding-top: 0px;
  6 | padding-right: 0px;
  7 | padding-bottom: 0px;
  8 | padding-left: 0px;
  9 |     box-sizing: border-box;
 10 |     font-family: 'Poppins', sans-serif;
 11 | }
 12 | 
 13 | body{
 14 |     display: flex;
 15 |     align-items: center;
 16 |     justify-content: center;
 17 |     min-height: 100vh;
 18 |     background: rgb(160,156,226);
 19 |     background: linear-gradient(90deg, rgba(160,156,226,1) 2%, rgba(238,153,237,1) 47%, rgba(177,127,189,1) 89%, rgba(208,52,207,1) 100%);
 20 | }
 21 | 
 22 | .container{
 23 |     width: 450px;
 24 |     background: #fff;
 25 |     border-radius: 8px;
 26 |     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 27 | }
 28 | 
 29 | .container h2{
 30 |     font-weight: 600;
 31 |     font-size: 1.31rem;
 32 |     padding: 1rem 1.75rem;
 33 |     border-bottom: 1px solid #d4dbe5;
 34 | }
 35 | 
 36 | .wrapper{
 37 |     margin: 1.25rem 1.75rem;
 38 | }
 39 | 
 40 | .wrapper .input-box{
 41 |     position: relative;
 42 | }
 43 | 
 44 | .input-box input{
 45 |     width: 100%;
 46 |     height: 53px;
 47 |     color: #000;
 48 |     background: none;
 49 |     font-size: 1.06rem;
 50 |     font-weight: 500;
 51 |     border-radius: 4px;
 52 |     letter-spacing: 1.4px;
 53 |     border: 1px solid #aaa;
 54 |     padding: 0 2.85rem 0 1rem;
 55 | }
 56 | 
 57 | .input-box span{
 58 |     position: absolute;
 59 |     right: 13px;
 60 |     cursor: pointer;
 61 |     line-height: 53px;
 62 |     color: #707070;
 63 | }
 64 | 
 65 | .input-box span:hover{
 66 |     color: #43A047 !important;
 67 | }
 68 | 
 69 | .wrapper .pass-indicator{
 70 |     width: 100%;
 71 |     height: 4px;
 72 |     position: relative;
 73 |     margin-top: 0.75rem;
 74 |     border-radius: 25px;
 75 | }
 76 | 
 77 | .pass-indicator::before{
 78 |     position: absolute;
 79 |     content: "";
 80 |     height: 100%;
 81 |     width: 50%;
 82 |     border-radius: inherit;
 83 |     transition: width 0.3s ease;
 84 | }
 85 | 
 86 | .pass-indicator#weak::before{
 87 |     width: 20%;
 88 |     background: #e64a4a;
 89 | }
 90 | 
 91 | .pass-indicator#medium::before{
 92 |     width: 50%;
 93 |     background: #f1c80b;
 94 | }
 95 | 
 96 | .pass-indicator#strong::before{
 97 |     width: 100%;
 98 |     background: #43A047;
 99 | }
100 | 
101 | .wrapper .pass-length{
102 |     margin: 1.56rem 0 1.25rem;
103 | }
104 | 
105 | .pass-length .details{
106 |     display: flex;
107 |     justify-content: space-between;
108 | }
109 | 
110 | .pass-length input{
111 |     width: 100%;
112 |     height: 5px;
113 | }
114 | 
115 | .pass-settings .options{
116 |     display: flex;
117 |     list-style: none;
118 |     flex-wrap: wrap;
119 |     margin-top: 1rem;
120 | }
121 | 
122 | .pass-settings .options .option{
123 |     display: flex;
124 |     align-items: center;
125 |     margin-bottom: 1rem;
126 |     width: calc(100% / 2);
127 | }
128 | 
129 | .options .option:first-child{
130 |     pointer-events: none;
131 | }
132 | 
133 | .options .option:first-child input{
134 |     opacity: 0.7;
135 | }
136 | 
137 | .options .option input{
138 |     height: 16px;
139 |     width: 16px;
140 |     cursor: pointer;
141 | }
142 | 
143 | .options .option label{
144 |     cursor: pointer;
145 |     color: #4f4f4f;
146 |     padding-left: 0.63rem;
147 | }
148 | 
149 | .wrapper .generate-btn{
150 |     width: 100%;
151 |     color: #fff;
152 |     border: none;
153 |     outline: none;
154 |     cursor: pointer;
155 |     background: #43A047;
156 |     font-size: 1.06rem;
157 |     padding: 0.94rem 0;
158 |     border-radius: 5px;
159 |     text-transform: uppercase;
160 |     margin: 0.94rem 0 1.3rem;
161 | }
162 | 


--------------------------------------------------------------------------------
/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 |     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Pass Generator | Harsh</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="container">
16 |         <h2>Pass Generator : </h2>
17 |         <div class="wrapper">
18 |             <div class="input-box">
19 |                 <input type="text" disabled>
20 |                 <span class="material-symbols-rounded">copy_all</span>
21 |             </div>
22 |             <div class="pass-indicator"></div>
23 |             <div class="pass-length">
24 |                 <div class="details">
25 |                     <label class="title">Password Length</label>
26 |                     <span></span>
27 |                 </div>
28 |                 <input type="range" min="1" max="30" value="15" step="1">
29 |             </div>
30 | 
31 |             <div class="pass-settings">
32 |                 <label class="title">Pass Settings</label>
33 |                 
34 |                 <i class="fa fa-linkedin-square" style="font-size:48px;color:rgb(84, 56, 239)"></i>
35 |                 <ul class="options">
36 |                     <li class="option">
37 |                         <input type="checkbox" id="lowercase" checked>
38 |                         <label for="lowercase">Lowercase (a-z)</label>
39 |                     </li>
40 |                     <li class="option">
41 |                         <input type="checkbox" id="uppercase">
42 |                         <label for="uppercase">Uppercase (A-Z)</label>
43 |                     </li>
44 |                     <li class="option">
45 |                         <input type="checkbox" id="numbers">
46 |                         <label for="numbers">Numbers (0-9)</label>
47 |                     </li>
48 |                     <li class="option">
49 |                         <input type="checkbox" id="symbols">
50 |                         <label for="symbols">Symbols (!-$^+)</label>
51 |                     </li>
52 |                     <li class="option">
53 |                         <input type="checkbox" id="exc-duplicate">
54 |                         <label for="exc-duplicate">Exclude Duplicate</label>
55 |                     </li>
56 |                     <li class="option">
57 |                         <input type="checkbox" id="spaces">
58 |                         <label for="spaces">Include Spaces</label>
59 |                     </li>
60 |                 </ul>
61 |             </div>
62 | 
63 |             <button class="generate-btn">Generate Password</button>
64 | 
65 |               <h4>Created By :  Harsh Singh</h4>
66 |             
67 |              <br>
68 |             <a href="https://www.linkedin.com/in/singhharsh14/">
69 |                 <img src="./image/icons8-linkedin.svg"  width="92px" height="92px"  style="margin-right: 35px;" >
70 |             </a>
71 |              <a href="https://github.com/HarshSingh21">
72 |                 <img src="./image/icons8-github.svg" width="92px" height="92px" style="margin-right: 35px;"  >
73 |             </a>
74 | 
75 | 
76 |             <!-- <a href="wwww.harshsingh.con"> <button> Harsh</button></a> -->
77 |             <a href="https://twitter.com/singh_harsh14">
78 |                 <img src="./image/icons8-twitter-circled-92.png" width="92px" height="92px" >
79 |             </a>
80 | 
81 | 
82 |         </div>
83 |     </div>
84 |     <script src="script.js"></script> 
85 |     <!-- completed date - 22/03/2023 -->
86 | </body>
87 | 
88 | </html>
89 | 


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