├── Password Genrator App.png ├── ReadMe.md ├── index.html ├── script.js └── style.css /Password Genrator App.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/JavaScript-Password-Generator/d93a4510d2fc07ee07fbfe1749bef48e0b67da2b/Password Genrator App.png -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | # JavaScript Password Generater 2 | 3 | Today I developed a javascript webapplication There We Can Genrate a Random password with The Adjust Password length. 4 | 5 | 6 | 7 | ## Authors 8 | - [Nitin Rajput](https://github.com/nitinrajputind/JavaScript-Password-Generator) 9 | 10 | 11 | ## 🛠 Skills 12 | Javascript, HTML, CSS... 13 | 14 | 15 | ## Screenshots 16 | ![App Screenshot](./Password%20Genrator%20App.png) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Password Generator 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Password Generator

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

Password length

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