Hello, developers! I'm excited to present my latest project: aPassword Generator. This tool is designed to help you create secure and random passwords with ease. Whether you need strong passwords for your online accounts or want to practice your JavaScript skills, this Password Generator is a great addition to your toolkit.
ThePassword Generatoris a web-based application that allows users to generate passwords with various configurations. You can customize the password length and include or exclude specific character types like lowercase letters, uppercase letters, numbers, and symbols. This project showcases how to build a dynamic password generator using JavaScript, coupled with a clean and user-friendly interface built with HTML and CSS.
Here's an overview of the project structure:
Password-Generator/ ├── index.html ├── style.css └── script.js
To get started with the project, follow these steps:
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Password-Generator.git
Open the project directory:
cd Password-Generator
Run the project:
The index.html file defines the structure of the Password Generator, including the input fields, controls, and the display area. Here’s a snippet:
Password Generator Password Generator
Password Length
The style.css file styles the Password Generator, making it visually appealing and responsive. Below are some key styles:
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { max-width: 100vw; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; color: #fff; font-weight: 600; flex-direction: column; } .container { border: 0.5px solid #fff; border-radius: 10px; padding: 28px 32px; display: flex; flex-direction: column; background: transparent; box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757; } .container h1 { font-size: 1.4rem; margin-block: 8px; } .inputBox { position: relative; } .inputBox span { position: absolute; top: 16px; right: 6px; color: #000; font-size: 28px; cursor: pointer; z-index: 2; } .passBox { background-color: #fff; border: none; outline: none; padding: 10px; width: 300px; border-radius: 4px; font-size: 20px; margin-block: 8px; text-overflow: ellipsis; } .row { display: flex; margin-block: 8px; } .row p, .row label { flex-basis: 100%; font-size: 18px; } .row input[type="checkbox"] { width: 20px; height: 20px; } .genBtn { border: none; outline: none; background-color: #2c619e; padding: 12px 24px; color: #fff; font-size: 18px; margin-block: 8px; font-weight: 700; cursor: pointer; border-radius: 4px; } .genBtn:hover { background-color: #0066ff; } .footer { color: white; margin-top: 150px; text-align: center; } .footer p { font-size: 16px; font-weight: 200; }
The script.js file contains the logic for generating passwords, managing user interactions, and copying passwords to the clipboard. Here's a snippet:
let inputSlider = document.getElementById("inputSlider"); let sliderValue = document.getElementById("sliderValue"); let passBox = document.getElementById("passBox"); let lowercase = document.getElementById("lowercase"); let uppercase = document.getElementById("uppercase"); let numbers = document.getElementById("numbers"); let symbols = document.getElementById("symbols"); let genBtn = document.getElementById("genBtn"); let copyIcon = document.getElementById("copyIcon"); // Showing input slider value sliderValue.textContent = inputSlider.value; inputSlider.addEventListener("input", () => { sliderValue.textContent = inputSlider.value; }); genBtn.addEventListener("click", () => { passBox.value = generatePassword(); }); let lowerChars = "abcdefghijklmnopqrstuvwxyz"; let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let allNumbers = "0123456789"; let allSymbols = "~!@#$%^&*"; // Function to generate Password function generatePassword() { let genPassword = ""; let allChars = ""; allChars += lowercase.checked ? lowerChars : ""; allChars += uppercase.checked ? upperChars : ""; allChars += numbers.checked ? allNumbers : ""; allChars += symbols.checked ? allSymbols : ""; if (allChars === "") { return genPassword; } let i = 1; while (i <= inputSlider.value) { genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length)); i++; } return genPassword; } copyIcon.addEventListener("click", () => { if (passBox.value !== "") { navigator.clipboard.writeText(passBox.value); copyIcon.innerText = "check"; copyIcon.title = "Password Copied"; setTimeout(() => { copyIcon.innerHTML = "content_copy"; copy Icon.title = ""; }, 3000); } });
You can check out the live demo of the Password Generator project here.
Creating the Password Generator was an enjoyable project that allowed me to apply my front-end development skills. This tool is useful for generating strong passwords and can be a great addition to your web development projects. I hope you find it as helpful as I do. Happy coding!
This project was developed as part of my journey to enhance my JavaScript skills and create practical web tools.
The above is the detailed content of Build a Password Generator Website. For more information, please follow other related articles on the PHP Chinese website!