├── .gitattributes
├── app.js
├── checkdouble.svg
├── driverjs.css
├── index.html
└── style.css


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | var inputDisplay = document.getElementById("inputDisplay"); // Display input
  2 | var clipBoard = document.querySelector("#clipBoard"); // Weak Password Div
  3 | var copyInput = document.querySelector(".copy"); // Copy input
  4 | var copiedInput = document.querySelector(".copied"); // Copied input
  5 | var generatePassBtn = document.querySelector("#btn"); // Password Generator Button
  6 | 
  7 | // Demo Driver-JS
  8 | var demo = document.getElementById("demo");
  9 | 
 10 | const driver = window.driver.js.driver;
 11 | 
 12 | const driverObj = driver({
 13 |   popoverClass: "driverjs-theme",
 14 |   showProgress: true,
 15 |   steps: [
 16 |     {
 17 |       element: ".display",
 18 |       popover: {
 19 |         title: "Display",
 20 |         description: "Generated Passowrd Field",
 21 |       },
 22 |     },
 23 |     {
 24 |       element: ".p-show",
 25 |       popover: {
 26 |         title: "Show & Hide",
 27 |         description: "You can hide your generated password by clicking this",
 28 |       },
 29 |     },
 30 |     {
 31 |       element: ".copy",
 32 |       popover: {
 33 |         title: "Copy to clipboard",
 34 |         description: "Copy your generated password",
 35 |       },
 36 |     },
 37 |     {
 38 |       element: "#rangeBar",
 39 |       popover: {
 40 |         title: "Set range of password",
 41 |         description: "Set the range of password by using scroll",
 42 |       },
 43 |     },
 44 |     {
 45 |       element: "#rangeValueDiv",
 46 |       popover: {
 47 |         title: "Character Length",
 48 |         description: "You can see your password length here",
 49 |       },
 50 |     },
 51 |     {
 52 |       element: ".checkboxes",
 53 |       popover: {
 54 |         title: "Choose Character",
 55 |         description: "Check box for choosing password characters",
 56 |       },
 57 |     },
 58 |     {
 59 |       element: "#btn",
 60 |       popover: {
 61 |         title: "Generate Password",
 62 |         description: "Generate your password",
 63 |       },
 64 |     },
 65 |   ],
 66 | });
 67 | 
 68 | demo.addEventListener("click", () => {
 69 |   driverObj.drive();
 70 | });
 71 | 
 72 | // Show & Hide Password
 73 | var showPassword = document.querySelector(".passIcon"); // Icon Container
 74 | var passShowIcon = document.querySelector(".p-show"); // Password Show icon
 75 | var passHideIcon = document.querySelector(".p-hidden"); // Password Hide icon
 76 | showPassword.addEventListener("click", () => {
 77 |   if (inputDisplay.type === "password") {
 78 |     inputDisplay.type = "text";
 79 |     passHideIcon.style.display = "none";
 80 |     passShowIcon.style.display = "block";
 81 |   } else {
 82 |     inputDisplay.type = "password";
 83 |     passHideIcon.style.display = "block";
 84 |     passShowIcon.style.display = "none";
 85 |   }
 86 | });
 87 | 
 88 | // Getting & Showing Input Range
 89 | var rangeBar = document.querySelector("#rangeBar"); // Range Bar
 90 | var showRangebarValue = document.querySelector("#rangeDisplay"); // Show Range Bar Values
 91 | rangeBar.addEventListener("change", () => {
 92 |   if (rangeBar.value < 10) {
 93 |     // If count lessthen 10 the added a zero in numbers
 94 |     showRangebarValue.innerHTML = 0 + rangeBar.value;
 95 |   } else {
 96 |     showRangebarValue.innerHTML = rangeBar.value;
 97 |   }
 98 | });
 99 | 
100 | // Copy ClipBoard
101 | var empty = document.querySelector(".empty").style;
102 | var emptyCheckBox = document.querySelector(".emptyCheckBox").style;
103 | clipBoard.addEventListener("click", () => {
104 |   if (inputDisplay.value == "") {
105 |     empty.display = "block";
106 |     weakPass.style.display = "none";
107 |     strongPass.style.display = "none";
108 |   } else {
109 |     empty.display = "none";
110 |     inputDisplay.select();
111 |     document.execCommand("copy");
112 |     copiedInput.style.display = "block";
113 |     copyInput.style.display = "none";
114 |   }
115 | });
116 | 
117 | var strongPass = document.querySelector(".strongPass"); // Strong Password Div
118 | var weakPass = document.querySelector(".weakPass"); // Weak Password Div
119 | // Password generation
120 | function generatePass() {
121 |   empty.display = "none";
122 |   copiedInput.style.display = "none";
123 |   copyInput.style.display = "block";
124 | 
125 |   var capitalLetters = document.querySelector("#capitalLetters"); // Capital Letters Check Box
126 |   var smallLetters = document.querySelector("#smallLetters"); // Small Letters Check Box
127 |   var numbers = document.querySelector("#numbers"); // Numbers Check Box
128 |   var specialCharacterCheckbox = document.querySelector("#specialCharacters"); // Special Characters Check Box
129 |   // Inside password characters
130 |   var uppercaseLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
131 |   var lowercaseLetters = "abcdefghijklmnopqrstuvwxyz";
132 |   var specialCharacters = "!@#$%^&*(/)_<=]{,+}[|;.>:'?-";
133 |   var number0To9 = "0123456789";
134 | 
135 |   // Checking If Check Box Checked
136 |   function getCheckedValues(checkboxes) {
137 |     var checkedValue = [];
138 |     for (var i = 0; i < checkboxes.length; i++) {
139 |       if (checkboxes[i].checked) {
140 |         checkedValue.push(checkboxes[i].value);
141 |       }
142 |     }
143 |     return checkedValue;
144 |   }
145 |   var capitalLettersChecked = getCheckedValues([capitalLetters]);
146 |   var smallLettersChecked = getCheckedValues([smallLetters]);
147 |   var numbersChecked = getCheckedValues([numbers]);
148 |   var specialCharactersChecked = getCheckedValues([specialCharacterCheckbox]);
149 | 
150 |   var pass = []; // array for random number
151 | 
152 |   // If checkbox checked the push there value in the above array
153 |   if (capitalLettersChecked.length > 0) {
154 |     pass.push(...uppercaseLetters);
155 |   }
156 |   if (smallLettersChecked.length > 0) {
157 |     pass.push(...lowercaseLetters);
158 |   }
159 |   if (numbersChecked.length > 0) {
160 |     pass.push(...number0To9);
161 |   }
162 |   if (specialCharactersChecked.length > 0) {
163 |     pass.push(...specialCharacters);
164 |   }
165 |   var generatePassword = "";
166 |   // Loop for generating password
167 |   for (var i = 0; i < rangeBar.value; i++) {
168 |     var getPass = pass[Math.floor(Math.random() * pass.length)];
169 |     generatePassword += getPass;
170 |     if (generatePassword === "undefined") {
171 |       generatePassword = "";
172 |       break;
173 |     }
174 |   }
175 |   // Generated password validation
176 |   if (
177 |     generatePassword.length >= 8 &&
178 |     capitalLettersChecked.length > 0 &&
179 |     smallLettersChecked.length > 0 &&
180 |     numbersChecked.length > 0 &&
181 |     specialCharactersChecked.length > 0
182 |   ) {
183 |     weakPass.style.display = "none";
184 |     strongPass.style.display = "block";
185 |   } else {
186 |     weakPass.style.display = "block";
187 |     strongPass.style.display = "none";
188 |   }
189 |   // Display password
190 |   inputDisplay.value = generatePassword;
191 | }
192 | 


--------------------------------------------------------------------------------
/checkdouble.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="20px" viewBox="0 0 17 19" version="1.1">
3 | <g id="surface1">
4 | <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 13 3.425781 C 13.476562 2.972656 13.476562 2.246094 13 1.796875 C 12.523438 1.351562 11.757812 1.351562 11.28125 1.796875 L 6.070312 6.726562 L 3.890625 4.667969 C 3.421875 4.21875 2.648438 4.21875 2.171875 4.667969 C 1.699219 5.117188 1.699219 5.84375 2.171875 6.292969 L 5.210938 9.164062 C 5.683594 9.609375 6.453125 9.609375 6.929688 9.164062 Z M 16.640625 8.015625 C 17.117188 7.566406 17.117188 6.839844 16.640625 6.390625 C 16.171875 5.941406 15.398438 5.941406 14.921875 6.390625 L 6.070312 14.761719 L 2.070312 10.984375 C 1.597656 10.535156 0.828125 10.535156 0.351562 10.984375 C -0.121094 11.433594 -0.121094 12.160156 0.351562 12.609375 L 5.210938 17.203125 C 5.683594 17.648438 6.453125 17.648438 6.929688 17.203125 L 16.640625 8.019531 Z M 16.640625 8.015625 "/>
5 | </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/driverjs.css:
--------------------------------------------------------------------------------
 1 | .driver-popover.driverjs-theme {
 2 |   background-color: #fde047;
 3 |   color: #000;
 4 | }
 5 | 
 6 | .driver-popover.driverjs-theme .driver-popover-title {
 7 |   font-size: 20px;
 8 | }
 9 | 
10 | .driver-popover.driverjs-theme .driver-popover-title,
11 | .driver-popover.driverjs-theme .driver-popover-description,
12 | .driver-popover.driverjs-theme .driver-popover-progress-text {
13 |   color: #000;
14 | }
15 | 
16 | .driver-popover.driverjs-theme button {
17 |   /* flex: 1; */
18 |   text-align: center;
19 |   background-color: #000;
20 |   color: #ffffff;
21 |   border: 2px solid #000;
22 |   text-shadow: none;
23 |   font-size: 14px;
24 |   padding: 5px 8px;
25 |   border-radius: 6px;
26 | }
27 | 
28 | .driver-popover.driverjs-theme button:hover {
29 |   background-color: #000;
30 |   color: #ffffff;
31 | }
32 | 
33 | /* .driver-popover.driverjs-theme .driver-popover-navigation-btns {
34 |   justify-content: space-between;
35 |   gap: 3px;
36 | } */
37 | 
38 | .driver-popover.driverjs-theme .driver-popover-close-btn {
39 |   color: #9b9b9b;
40 | }
41 | 
42 | .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
43 |   color: #000;
44 | }
45 | 
46 | .driver-popover.driverjs-theme
47 |   .driver-popover-arrow-side-left.driver-popover-arrow {
48 |   border-left-color: #fde047;
49 | }
50 | 
51 | .driver-popover.driverjs-theme
52 |   .driver-popover-arrow-side-right.driver-popover-arrow {
53 |   border-right-color: #fde047;
54 | }
55 | 
56 | .driver-popover.driverjs-theme
57 |   .driver-popover-arrow-side-top.driver-popover-arrow {
58 |   border-top-color: #fde047;
59 | }
60 | 
61 | .driver-popover.driverjs-theme
62 |   .driver-popover-arrow-side-bottom.driver-popover-arrow {
63 |   border-bottom-color: #fde047;
64 | }
65 | .driver-popover-close-btn {
66 |   display: none !important;
67 | }
68 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  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.0" />
  6 |     <title>Strong Password Generator</title>
  7 |     <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
  8 |     <link
  9 |       rel="stylesheet"
 10 |       href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"
 11 |     />
 12 |     <link
 13 |       rel="stylesheet"
 14 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
 15 |     />
 16 |     <link
 17 |       rel="stylesheet"
 18 |       href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
 19 |     />
 20 |     <link rel="stylesheet" href="driverjs.css" />
 21 |     <link rel="stylesheet" href="style.css" />
 22 |   </head>
 23 |   <body>
 24 |     <main class="container">
 25 |       <div class="box">
 26 |         <div class="demo-Heading">
 27 |           <h1>Passowrd Generator</h1>
 28 |           <button id="demo">Demo</button>
 29 |         </div>
 30 |         <div class="displayBox">
 31 |           <!-- Display Value Input -->
 32 |           <div class="display">
 33 |             <input
 34 |               type="text"
 35 |               id="inputDisplay"
 36 |               placeholder="Strong Passowrd"
 37 |             />
 38 |             <!-- Password Show/Hidden -->
 39 |             <div class="passIcon">
 40 |               <i class="fa-solid fa-eye p-show"></i>
 41 |               <i class="fa-solid fa-eye-slash p-hidden"></i>
 42 |             </div>
 43 |           </div>
 44 |           <!-- Dialogue Box -->
 45 |           <div class="dialogueBox">
 46 |             <!-- Password Checker -->
 47 |             <div>
 48 |               <!-- Strong Password -->
 49 |               <div class="strongPass animate__animated animate__fadeIn">
 50 |                 <i class="fa-solid fa-circle-check"></i>
 51 |                 Strong Password
 52 |               </div>
 53 |               <!-- weak password -->
 54 |               <div class="weakPass animate__animated animate__fadeIn">
 55 |                 <i class="fa-solid fa-circle-xmark"></i>
 56 |                 Weak Password
 57 |               </div>
 58 |               <!-- empty field -->
 59 |               <div class="empty animate__animated animate__fadeIn">
 60 |                 <i class="fa-solid fa-circle-xmark"></i>
 61 |                 Can't copy empty field
 62 |               </div>
 63 |               <!-- empty CheckBox -->
 64 |               <div class="emptyCheckBox animate__animated animate__fadeIn">
 65 |                 <i class="fa-solid fa-circle-xmark"></i>
 66 |                 Must be single checkbox selected
 67 |               </div>
 68 |             </div>
 69 |             <!-- Copy -->
 70 |             <div id="clipBoard">
 71 |               <div class="copy animate__animated animate__fadeIn">
 72 |                 <i class="fa-regular fa-copy"></i> Copy
 73 |               </div>
 74 |               <div class="copied animate__animated animate__fadeIn">
 75 |                 <i class="fa-solid fa-copy"></i> Copied
 76 |               </div>
 77 |             </div>
 78 |           </div>
 79 |           <!-- Range Bar -->
 80 |           <div>
 81 |             <input type="range" min="0" max="24" id="rangeBar" value="12" />
 82 |           </div>
 83 |           <!--Range Value & CheckBox -->
 84 |           <div class="checkBox-Container">
 85 |             <div id="rangeValueDiv">
 86 |               <!-- Range value -->
 87 |               <p>Character Length:<span id="rangeDisplay">12</span></p>
 88 |             </div>
 89 |             <div class="checkboxes">
 90 |               <!-- CheckBox -->
 91 |               <input
 92 |                 type="checkbox"
 93 |                 id="capitalLetters"
 94 |                 value="capitalLetters"
 95 |                 checked
 96 |               />
 97 |               <label for="capitalLetters">A-Z</label>
 98 |               <input type="checkbox" id="smallLetters" value="smallLetters" />
 99 |               <label for="smallLetters">a-z</label>
100 |               <input type="checkbox" id="numbers" value="numbers" />
101 |               <label for="numbers">0-9</label>
102 |               <input
103 |                 type="checkbox"
104 |                 id="specialCharacters"
105 |                 value="specialCharacters"
106 |               />
107 |               <label for="specialCharacters">@#$</label>
108 |             </div>
109 |           </div>
110 |           <!-- Button -->
111 |           <button id="btn" onclick="generatePass()">Generate Passowrd</button>
112 |         </div>
113 |       </div>
114 |     </main>
115 | 
116 |     <script src="app.js"></script>
117 |   </body>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | 
 10 | body {
 11 |   background-color: #ffd700;
 12 | }
 13 | 
 14 | .container {
 15 |   width: 100%;
 16 | }
 17 | 
 18 | .box {
 19 |   width: 80%;
 20 |   max-width: 600px;
 21 |   padding: 30px;
 22 |   background-color: #fff;
 23 |   margin: 50px auto;
 24 |   border-radius: 15px;
 25 |   text-align: center;
 26 | }
 27 | 
 28 | .demo-Heading {
 29 |   display: flex;
 30 |   flex-wrap: wrap;
 31 |   justify-content: space-between;
 32 |   align-items: center;
 33 |   margin-bottom: 20px;
 34 | }
 35 | 
 36 | #demo {
 37 |   padding: 10px 20px;
 38 |   border: 1px solid #ffa400;
 39 |   background: transparent;
 40 |   border-radius: 5px;
 41 |   font-weight: 500;
 42 |   cursor: pointer;
 43 |   height: 40px;
 44 |   transition: all 0.3s linear;
 45 | }
 46 | 
 47 | #demo:hover {
 48 |   background-color: #ffa400;
 49 |   color: #fff;
 50 | }
 51 | 
 52 | .box h1 {
 53 |   font-size: 2.5em;
 54 | }
 55 | 
 56 | .display {
 57 |   position: relative;
 58 | }
 59 | 
 60 | #inputDisplay {
 61 |   width: 100%;
 62 |   padding: 5px 10px;
 63 |   outline: none;
 64 |   font-size: 24px;
 65 |   border-radius: 5px;
 66 |   border: 1px solid #ffa400;
 67 | }
 68 | 
 69 | .passIcon {
 70 |   padding: 10px 15px;
 71 |   font-size: 24px;
 72 |   position: absolute;
 73 |   top: 0;
 74 |   right: 0;
 75 |   cursor: pointer;
 76 | }
 77 | 
 78 | i.p-hidden {
 79 |   display: none;
 80 | }
 81 | 
 82 | .dialogueBox {
 83 |   display: flex;
 84 |   justify-content: space-between;
 85 |   align-items: center;
 86 |   margin: 10px 0;
 87 |   user-select: none;
 88 | }
 89 | 
 90 | .copy,
 91 | .copied {
 92 |   padding: 5px 10px;
 93 |   border-radius: 5px;
 94 |   cursor: pointer;
 95 |   transition: all 0.3s linear;
 96 |   border: 1px solid #ffa400;
 97 | }
 98 | 
 99 | .copy:hover {
100 |   background-color: #ffa400;
101 |   color: #fff;
102 | }
103 | 
104 | .copied {
105 |   display: none;
106 | }
107 | 
108 | .copied:hover {
109 |   cursor: url("checkdouble.svg"), auto;
110 | }
111 | 
112 | .strongPass > i {
113 |   color: green;
114 | }
115 | 
116 | .strongPass,
117 | .weakPass,
118 | .empty,
119 | .emptyCheckBox {
120 |   display: none;
121 | }
122 | 
123 | .weakPass > i {
124 |   color: #ff5733;
125 | }
126 | 
127 | .empty {
128 |   color: red;
129 | }
130 | 
131 | #rangeBar {
132 |   width: 100%;
133 | }
134 | 
135 | span#rangeDisplay {
136 |   margin-left: 5px;
137 |   font-weight: 600;
138 | }
139 | 
140 | .checkBox-Container {
141 |   display: flex;
142 |   justify-content: space-between;
143 |   align-items: center;
144 |   margin: 10px 0;
145 |   user-select: none;
146 | }
147 | 
148 | .checkboxes {
149 |   display: flex;
150 |   align-items: center;
151 | }
152 | 
153 | .checkboxes input[type="checkbox"] {
154 |   margin: 0 3px 0 10px;
155 | }
156 | 
157 | #btn {
158 |   padding: 15px;
159 |   font-size: 18px;
160 |   width: 100%;
161 |   border: none;
162 |   border-radius: 5px;
163 |   cursor: pointer;
164 |   background-color: transparent;
165 |   transition: all 0.3s linear;
166 |   border: 1px solid #ffa400;
167 |   font-weight: 500;
168 | }
169 | 
170 | #btn:hover {
171 |   background-color: #ffa400;
172 |   color: #fff;
173 | }
174 | 
175 | /* Media Queries for responsiveness */
176 | @media only screen and (max-width: 768px) {
177 |   .box {
178 |     width: 90%;
179 |     padding: 20px;
180 |   }
181 | 
182 |   .box h1 {
183 |     font-size: 2em;
184 |   }
185 | 
186 |   #btn {
187 |     padding: 12px;
188 |     font-size: 16px;
189 |   }
190 | }
191 | @media only screen and (max-width: 500px) {
192 |   .box {
193 |     position: absolute;
194 |     left: 50%;
195 |     transform: translate(-50%, 0);
196 |   }
197 | 
198 |   #inputDisplay::placeholder {
199 |     font-size: 18px;
200 |   }
201 |   .checkBox-Container {
202 |     flex-wrap: wrap;
203 |     justify-content: center;
204 |   }
205 |   label {
206 |     width: max-content;
207 |   }
208 | }
209 | 


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