Password Generator
Home
Snippets
Password Generator
HTML
CSS
JS
<div class="container"> <h2>Generate Your Password</h2> <input id="password" type="text" name="" placeholder="Password" readonly> <div class="btns"> <div class="btn" onclick="genPassword()">Generate</div> <a class="btn" onclick="copyPassword()">Copy</a> </div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { background-color: #333333; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: white; padding: 30px; display: grid; gap: 40px; border-radius: 10px; box-shadow: 2px 2px 20px #000000; } .container h2 { text-align: center; font-size: 26px; color: orangered; font-family: sans-serif; } input { padding: 20px; user-select: none; height: 50px; width: 350px; border-radius: 5px; border: none; border: 2px solid orangered; outline: none; font-size: 20px; } input::placeholder { font-size: 20px; } .btns{ display: flex; justify-content: space-between; } .btn{ font-size: 15px; padding: 13px 50px; border: 2px solid orangered; background-color: orangered; color: white; cursor: pointer; border-radius: 5px; } .btn:hover { color: white; background-color: black; }
var password = document.getElementById("password"); function genPassword() { var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var passLength = 15; var password = ""; for (var i = 0; i < passLength; i++) { var randomNumber = Math.floor(Math.random() * chars.length); password += chars.substring(randomNumber, randomNumber + 1); } document.getElementById("password").value = password; } function copyPassword() { var copyText = document.getElementById("password"); copyText.select(); document.execCommand("copy"); }
Ad #1
Ad #2
Scroll to Top