Password generator using Html CSS 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

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 javascriptHope 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 

Post a Comment

Previous Post Next Post