├── LICENSE ├── pass.css ├── index.html ├── pass.js └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Abbireddy Venkata Chandu 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 | -------------------------------------------------------------------------------- /pass.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rebeccapurple; 9 | color: white; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | font-family: "Poppins", sans-serif; 14 | margin: 0; 15 | min-height: 100vh; 16 | } 17 | 18 | .pw-container { 19 | background-color: rgb(46, 12, 80); 20 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 21 | min-width: 400px; 22 | } 23 | 24 | .pw-header { 25 | padding: 1rem; 26 | } 27 | 28 | .pw { 29 | background-color: rgb(69, 28, 109); 30 | display: flex; 31 | font-size: 1.5rem; 32 | align-items: center; 33 | height: 70px; 34 | width: 100%; 35 | position: relative; 36 | padding: 1rem; 37 | overflow: auto; 38 | } 39 | 40 | .pw button { 41 | background-color: white; 42 | border: none; 43 | color: rgb(29, 2, 56); 44 | cursor: pointer; 45 | font-family: inherit; 46 | font-weight: bold; 47 | padding: 0.25rem; 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | transform: translate(0, 20%); 52 | transition: opacity 0.2s ease, transform 0.2s ease; 53 | opacity: 0; 54 | } 55 | 56 | .pw:hover button { 57 | opacity: 1; 58 | transform: translate(0, 0%); 59 | } 60 | 61 | .pw-body { 62 | padding: 0 1rem 1rem; 63 | } 64 | 65 | .form-control { 66 | color: #eee; 67 | display: flex; 68 | justify-content: space-between; 69 | margin: 0.75rem 0; 70 | } 71 | 72 | .generate { 73 | background-color: #ecb602; 74 | border: none; 75 | color: rebeccapurple; 76 | cursor: pointer; 77 | display: block; 78 | font-size: 1.5rem; 79 | font-weight: bold; 80 | padding: 0.75rem; 81 | margin-top: 1rem; 82 | width: 100%; 83 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Password Generator 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | l823Zs78#Css09@ 15 | 16 |
17 |
18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 | 42 |
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /pass.js: -------------------------------------------------------------------------------- 1 | const pwEl = document.getElementById("pw"); 2 | const copyEl = document.getElementById("copy"); 3 | const lenEl = document.getElementById("len"); 4 | const upperEl = document.getElementById("upper"); 5 | const lowerEl = document.getElementById("lower"); 6 | const numberEl = document.getElementById("number"); 7 | const symbolEl = document.getElementById("symbol"); 8 | const generateEl = document.getElementById("generate"); 9 | 10 | const upperLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 11 | const lowerLetters = "abcdefghijklmnopqrstuvwxyz"; 12 | const numbers = "0123456789"; 13 | const symbols = "!@#$%^&*()_+="; 14 | 15 | function getLowercase() { 16 | return lowerLetters[Math.floor(Math.random() * lowerLetters.length)]; 17 | } 18 | 19 | function getUppercase() { 20 | return upperLetters[Math.floor(Math.random() * upperLetters.length)]; 21 | } 22 | 23 | function getNumber() { 24 | return numbers[Math.floor(Math.random() * numbers.length)]; 25 | } 26 | 27 | function getSymbol() { 28 | return symbols[Math.floor(Math.random() * symbols.length)]; 29 | } 30 | 31 | function generatePassword() { 32 | const len = lenEl.value; 33 | 34 | let password = ""; 35 | 36 | if (upperEl.checked) { 37 | password += getUppercase(); 38 | } 39 | 40 | if (lowerEl.checked) { 41 | password += getLowercase(); 42 | } 43 | 44 | if (numberEl.checked) { 45 | password += getNumber(); 46 | } 47 | 48 | if (symbolEl.checked) { 49 | password += getSymbol(); 50 | } 51 | 52 | for (let i = password.length; i < len; i++) { 53 | const x = generateX(); 54 | password += x; 55 | } 56 | 57 | pwEl.innerText = password; 58 | } 59 | 60 | function generateX() { 61 | const xs = []; 62 | if (upperEl.checked) { 63 | xs.push(getUppercase()); 64 | } 65 | 66 | if (lowerEl.checked) { 67 | xs.push(getLowercase()); 68 | } 69 | 70 | if (numberEl.checked) { 71 | xs.push(getNumber()); 72 | } 73 | 74 | if (symbolEl.checked) { 75 | xs.push(getSymbol()); 76 | } 77 | 78 | if (xs.length === 0) return ""; 79 | 80 | return xs[Math.floor(Math.random() * xs.length)]; 81 | } 82 | 83 | generateEl.addEventListener("click", generatePassword); 84 | 85 | copyEl.addEventListener("click", () => { 86 | const textarea = document.createElement("textarea"); 87 | const password = pwEl.innerText; 88 | 89 | if (!password) { 90 | return; 91 | } 92 | 93 | textarea.value = password; 94 | document.body.appendChild(textarea); 95 | textarea.select(); 96 | document.execCommand("copy"); 97 | textarea.remove(); 98 | alert("Password copied to clipboard"); 99 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | A **Strong Password Generator** is a simple web-based application that allows users to generate secure, random passwords. The application is built using **HTML**, **CSS**, and **JavaScript** to provide a user-friendly interface and functionality. 3 | 4 | ## Features 5 | 6 | - **Customizable Password Length**: Users can select the desired length of the password (e.g., 8-20 characters). 7 | - **Character Options**: Users can include/exclude: 8 | - Uppercase letters 9 | - Lowercase letters 10 | - Numbers 11 | - Special characters (e.g., `!@#$%^&*`) 12 | - **Real-Time Preview**: The generated password is displayed dynamically as options are selected. 13 | - **Copy to Clipboard**: Users can easily copy the generated password with a single click. 14 | - **Responsive Design**: Works seamlessly across devices, including desktops, tablets, and mobile phones. 15 | 16 | ## Technology Stack 17 | 18 | - **HTML**: Structure of the application 19 | - **CSS**: Styling and layout 20 | - **JavaScript**: Functionality and interactivity 21 | 22 | ## How It Works 23 | 24 | 1. **Password Criteria Selection**: 25 | - Users choose the desired password length and toggle options for uppercase, lowercase, numbers, and special characters. 26 | 2. **Password Generation**: 27 | - JavaScript logic generates a random password based on the selected criteria. 28 | 3. **User Interaction**: 29 | - Users can click the "Generate Password" button to create a password. 30 | - The "Copy" button allows users to copy the generated password to the clipboard. 31 | 32 | ## Code Snippet (JavaScript Logic Example) 33 | 34 | ```javascript 35 | function generatePassword(length, options) { 36 | const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 37 | const lowerCase = "abcdefghijklmnopqrstuvwxyz"; 38 | const numbers = "0123456789"; 39 | const specialChars = "!@#$%^&*()_+[]{}|;:,.<>?"; 40 | 41 | let characters = ""; 42 | if (options.uppercase) characters += upperCase; 43 | if (options.lowercase) characters += lowerCase; 44 | if (options.numbers) characters += numbers; 45 | if (options.specialChars) characters += specialChars; 46 | 47 | let password = ""; 48 | for (let i = 0; i < length; i++) { 49 | const randomIndex = Math.floor(Math.random() * characters.length); 50 | password += characters[randomIndex]; 51 | } 52 | 53 | return password; 54 | } 55 | ``` 56 | 57 | ## Installation and Usage 58 | 59 | 1. Clone the repository: 60 | ```bash 61 | git clone https://github.com/venkat-0706/strong-password-generator.git 62 | ``` 63 | 2. Open the `index.html` file in a web browser. 64 | 3. Customize the password options and click "Generate Password." 65 | 66 | ## Live Demo 67 | [Click Here]( https://venkat-0706.github.io/StrongPass-Generator/) 68 | 69 | ## Screenshots 70 | 71 | ![Password Generator UI](https://res.cloudinary.com/dhmixzenl/image/upload/v1736153441/CsidsxA-uyzoEbzrAPWAgMDBIAxZI--GR2gj77cGzAbMSAsi-DorKKNWrcWmnXYEZpOSIf94LnPMLU4UC-rSQlXjkg_w640-h400-e365-rj-sc0x00ffffff_b3gfn7.jpg) 72 | 73 | ## Future Enhancements 74 | 75 | - Save generated passwords locally or in a database. 76 | - Add strength indicators (e.g., weak, medium, strong). 77 | - Support for multilingual interface. 78 | 79 | ## Contributions 80 | 81 | Contributions are welcome! Feel free to open issues or submit pull requests. 82 | 83 | ## License 84 | 85 | This project is licensed under the [MIT License](LICENSE). 86 | --------------------------------------------------------------------------------