├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Password_Gen -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | Password Generator | JavaScript Project 14 | 15 | 16 |
17 |

Password Generator

18 | 19 |
20 | 21 | content_copy 22 |
23 | 24 | 25 | 26 |
27 |

Password Length

28 | 29 |
30 | 31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 | 49 |
50 | 51 | 54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let inputSlider = document.getElementById("inputSlider"); 2 | let sliderValue = document.getElementById("sliderValue"); 3 | let passBox = document.getElementById("passBox"); 4 | let lowercase = document.getElementById("lowercase"); 5 | let uppercase = document.getElementById("uppercase"); 6 | let numbers = document.getElementById("numbers"); 7 | let symbols = document.getElementById("symbols"); 8 | let genBtn = document.getElementById("genBtn"); 9 | let copyIcon = document.getElementById("copyIcon"); 10 | 11 | 12 | // Showing input slider value 13 | sliderValue.textContent = inputSlider.value; 14 | inputSlider.addEventListener('input', ()=>{ 15 | sliderValue.textContent = inputSlider.value; 16 | }); 17 | 18 | genBtn.addEventListener('click', ()=>{ 19 | passBox.value = generatePassword(); 20 | }) 21 | 22 | let lowerChars = "abcdefghijklmnopqrstuvwxyz"; 23 | let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 24 | let allNumbers = "0123456789"; 25 | let allSymbols = "~!@#$%^&*"; 26 | 27 | // Function to generate Password 28 | function generatePassword(){ 29 | let genPassword = ""; 30 | let allChars = ""; 31 | 32 | allChars += lowercase.checked ? lowerChars : ""; 33 | allChars += uppercase.checked ? upperChars : ""; 34 | allChars += numbers.checked ? allNumbers : ""; 35 | allChars += symbols.checked ? allSymbols : ""; 36 | 37 | 38 | if(allChars == "" || allChars.length == 0){ 39 | return genPassword; 40 | } 41 | 42 | 43 | let i = 1; 44 | while(i<=inputSlider.value){ 45 | genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length)); 46 | i++; 47 | } 48 | 49 | return genPassword; 50 | } 51 | 52 | copyIcon.addEventListener('click', ()=>{ 53 | if(passBox.value != "" || passBox.value.length >=1){ 54 | navigator.clipboard.writeText(passBox.value); 55 | copyIcon.innerText = "check"; 56 | copyIcon.title = "Password Copied"; 57 | 58 | setTimeout(()=>{ 59 | copyIcon.innerHTML = "content_copy"; 60 | copyIcon.title = ""; 61 | }, 3000) 62 | } 63 | }); 64 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | 8 | body{ 9 | max-width: 100vw; 10 | min-height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background: linear-gradient(to right bottom, #ffa585, #45c5d8); 15 | color: #fff; 16 | font-weight: 600; 17 | } 18 | 19 | .container{ 20 | border: 0.5px solid #fff; 21 | border-radius: 10px; 22 | padding: 28px 32px; 23 | display: flex; 24 | flex-direction: column; 25 | background: transparent; 26 | box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757; 27 | } 28 | 29 | .container h1{ 30 | font-size: 1.4rem; 31 | margin-block: 8px; 32 | } 33 | .inputBox{ 34 | position: relative; 35 | } 36 | 37 | .inputBox span{ 38 | position: absolute; 39 | top: 16px; 40 | right: 6px; 41 | color: #000; 42 | font-size: 28px; 43 | cursor: pointer; 44 | z-index: 2; 45 | } 46 | .passBox{ 47 | background-color: #fff; 48 | border: none; 49 | outline: none; 50 | padding: 10px; 51 | width: 300px; 52 | border-radius: 4px; 53 | font-size: 20px; 54 | margin-block: 8px; 55 | text-overflow: ellipsis; 56 | } 57 | 58 | .row{ 59 | display: flex; 60 | margin-block: 8px; 61 | } 62 | 63 | .row p, .row label{ 64 | flex-basis: 100%; 65 | font-size: 18px; 66 | } 67 | 68 | .row input[type="checkbox"]{ 69 | width: 20px; 70 | height: 20px; 71 | } 72 | 73 | .genBtn{ 74 | border: none; 75 | outline: none; 76 | background-color: #2c619e; 77 | padding: 12px 24px; 78 | color: #fff; 79 | font-size: 18px; 80 | margin-block: 8px; 81 | font-weight: 700; 82 | cursor: pointer; 83 | border-radius: 4px; 84 | } 85 | 86 | .genBtn:hover{ 87 | background-color: #0066ff; 88 | } 89 | 90 | --------------------------------------------------------------------------------