Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Random Password Generator" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Random Password Generator" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Random Password Generator [Source Code]
To get the following HTML, CSS & JS code for the Random Password Generator project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random Password Generator</title> <link rel="stylesheet" href="style.css"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/ebb335c6c8.js" crossorigin="anonymous"></script> </head> <body> <h1>Random Password Generator</h1> <div class="container"> <div class="inputContainer"> <input type="text" disabled> <i class="fa-solid fa-clipboard"></i> </div> <div class="rangeContainer"> <input type="range" min="8" max="16"> <span>8</span> </div> <button class="generateBtn">Generate</button> </div> <script src="index.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; background-color: #053a5f; } h1 { color: white; margin-bottom: 10px; word-spacing: 5px; } .container { width: 400px; padding: 50px; background-color: white; border-radius: 10px; } .inputContainer { position: relative; } .inputContainer input { width: 100%; height: 50px; font-size: 18px; padding: 0 30px; border: 1px solid #053a5f; border-radius: 10px; outline: none; } .inputContainer i { font-size: 24px; color: #053a5f; position: absolute; top: 50%; right: 10px; transform: translate(-50%, -50%); cursor: pointer; } .rangeContainer { margin: 30px 0; display: flex; align-items: center; gap: 12px; } .rangeContainer input { width: 90%; accent-color: #053a5f; cursor: pointer; } /* For Firefox */ .rangeContainer input::-moz-range-thumb { border: 3px solid #053a5f; outline: 4px solid #053a5f; outline-offset: 3px; } .rangeContainer input::-moz-range-track { height: 12px; border-radius: 50px; background: #053a5f; } /* For chrome, edge and safari */ .rangeContainer input::-webkit-slider-thumb { border: 3px solid #053a5f; outline: 4px solid #053a5f; outline-offset: 3px; } .rangeContainer span { font-weight: 600; } .generateBtn { font-size: 24px; width: 100%; height: 50px; color: white; background-color: #053a5f; border: none; border-radius: 10px; cursor: pointer; } .generateBtn:active { transform: scale(0.95); }
const inputEl = document.querySelector(".inputContainer input"); const copyEl = document.querySelector(".inputContainer i"); const rangeEl = document.querySelector(".rangeContainer input"); const spanEl = document.querySelector(".rangeContainer span"); const generateBtnEl = document.querySelector(".generateBtn"); // All characters var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var password = ""; // when we change the input range it automatically calls the generatePassword Function rangeEl.addEventListener("input",()=>{ spanEl.innerHTML = rangeEl.value generatePassword() }) // Generates random password function generatePassword(){ value = rangeEl.value var password = ""; for(var i=0; i<value; i++){ var randomNumber = Math.floor(Math.random() * chars.length); password = password + chars[randomNumber]; } inputEl.value = password; copyEl.classList.replace("fa-clipboard-check","fa-clipboard"); } // Whenever we click on the generate button it call generatePassword function generateBtnEl.addEventListener("click",()=>{ generatePassword(); }) // if we click on the copy icon, the password will copy to our clipboard copyEl.addEventListener("click",()=>{ navigator.clipboard.writeText(inputEl.value) copyEl.classList.replace("fa-clipboard","fa-clipboard-check"); setTimeout(() => { copyEl.classList.replace("fa-clipboard-check","fa-clipboard"); }, 1500); }) generatePassword();