How To Create A Password Generator In Javascript

Password generator using Html CSS Javascript!

password generator javascript | password generator using Html Css javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create password generator javascript. We use HTML & CSS and javascript for this password generator javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a password generator javascript.

HTML code for password generator

                                    <!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>password Gen..</title>      <link rel="stylesheet" href="index.css">    </head>    <body>      <div class="pw-container">        <div class="pw-header">          <div class="pw">            <span id="pw"> Password Here</span>            <button id="copy">Copy</button>          </div>        </div>        <div class="pw-body">          <div class="form-control">            <lable for="length">Password Length</lable>            <input id="len" value="10" type="number" min="8" max="30">          </div>          <div class="form-control">            <lable for="upper">Contain Uppercase Letters</lable>            <input id="upper" type="checkbox">          </div>          <div class="form-control">            <lable for="lower">Contain Lowercase Letters</lable>            <input id="lower" type="checkbox">          </div>          <div class="form-control">            <lable for="number">Contain Numbers </lable>            <input id="number" type="checkbox">          </div>          <div class="form-control">            <lable for="symbol">Contain Symbol</lable>            <input id="symbol" type="checkbox">          </div>          <button class="generate" id="generate">Generate Paaword</button>        </div>      </div>      <script src="index.js"></script>    </body>    </html>

There is all HTML code for the password generator. Now, you can see output without CSS, then we write CSS for our password generator .

Output.

password generator javascript | password generator using Html Css javascript

CSS for password generator

                      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');    *{      box-sizing: border-box;    }    body{      margin: 0;      font-family: "Poppins", sans-serif;     background-color: rebeccapurple;     color: #eee;     display: flex;     align-items: center;     justify-content: center;     min-height: 100vh;      }      .pw-container{        width: 400px;        background-color: rgb(69, 17, 118);        box-shadow: 0 4px 10px rgba(0,0,0,0.6);      }       .pw-header{        padding: 1rem;       }     .pw{       width: 100%;       height: 70px;       background-color: rebeccapurple;       display: flex;       align-items: center;       position: relative;       font-size: 1.5rem;       padding: 1rem;       /* overflow: auto; */     }     .pw button{       position: absolute;       top: 0;       right: 0;       transform: translate(0, 50%);       transition: opacity 0.2s ease, transform 0.2s ease;       opacity: 0;       background-color: rgb(35, 5, 66);       padding: 0.25rem 1rem;       font-family: inherit;       font-weight: bold;       color: #fff;       border: none;       cursor: pointer;      }      .pw:hover button{        opacity: 1;        transform: translate(0,-80%);      }       .pw-body{        padding: 0 1rem 1rem;       }     .form-control{       color: #eee;     display: flex;     justify-content: space-between;     margin: 0.75rem 0;     }     .generate{       display: block;       background-color: #ecb602;       color: rebeccapurple;       font-weight: bold;       padding: 1rem;       font-size: 1.5rem;       margin-top: 1rem;       border: none;       width: 100%;       cursor: pointer;     }

Javascript project ideas with complete source code

Now we have completed our CSS section, Here is our updated output CSS.

Output.

password generator javascript | password generator using Html Css javascript

Now add javascript for the password generator!

Javascript for password generator

                      const PwEl = document.getElementById("pw");    const copyEl = document.getElementById("copy");    const lenEl = document.getElementById("len");    const upperEl = document.getElementById("upper");    const lowerEl = document.getElementById("lower");    const symbolEl = document.getElementById("symbol");    const generateEl = document.getElementById("generate");    const numberEl = document.getElementById("number");    const upperLetters = "ABCDEFGHIJKLMNOPQSRTUVWXYZ";    const lowerLetters = "abcdefghijklmnopqrstuvwxyz";    const numbers = "0123456789";    const symbol = "~!@#$%^&*()_+=|";    function getLowercase() {     return lowerLetters[Math.floor(Math.random() * lowerLetters.length)];    }    function getUppercase() {     return upperLetters[Math.floor(Math.random() * upperLetters.length)];    }    function getNumber() {     return numbers[Math.floor(Math.random() * numbers.length)];    }    function getSymbol() {     return symbol[Math.floor(Math.random() * symbol.length)];    }    function generatePassword() {     const len = lenEl.value;     let password = "";     for (let i = 0; i < len; i++) {      const x = generateX();      password += x;     }     PwEl.innerText = password;    }    function generateX() {     const xs = [];     if (upperEl.checked) {      xs.push(getUppercase());     }     if (lowerEl.checked) {      xs.push(getLowercase());     }     if (numberEl.checked) {      xs.push(getNumber());     }     if (symbolEl.checked) {      xs.push(getSymbol());     }     if (xs.length === 0) return "";     return xs[Math.floor(Math.random() * xs.length)];    }    generateEl.addEventListener("click", generatePassword);    copyEl.addEventListener("click", () => {     const textarea = document.createElement("textarea");     const password = PwEl.innerText;     if (!password) {      return;     }     textarea.value = password;     document.body.appendChild(textarea);     textarea.select();     document.execCommand("copy");     textarea.remove();     alert("password copied to clipboard");    });

Output.

password generator javascript | password generator using Html Css javascript

Check it more

Now we have completed our javascript section , Here is our updated output with javascript . Hope you like password generator; you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us how to create a password generator using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by - Code With Random/Anki